backgroundimage用法（网页制作教程）

前言

继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗?》，添加按钮、背景粒子动画效果。

其实在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。

所以用最简单通俗的代码，更能利于后期的维护开发。

ok!先来看看背景粒子动画效果预览图：

以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗?》的，所以没有了解的可以先去看看这篇文章。

按钮点击粒子动画

由于按钮是梯形的，之前代码在button选择器上面已经加了伪类来实现梯形了，所以我们只能再套一层元素(button-text)来实现粒子。

.button-text {

position: relative;

width: 100%;

border-radius: 4px;

border: none;

cursor: pointer;

}

.button-text:before,

.button-text:after {

position: absolute;

content: '';

display: block;

width: 140%;

height: 100%;

left: -20%;

z-index: -1000;

background-repeat: no-repeat;

}

.button-text:before {

display: none;

top: -75%;

background-image:

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%);

background-size:

10% 10%,

20% 20%,

15% 15%,

20% 20%,

18% 18%,

10% 10%,

15% 15%,

10% 10%,

18% 18%;

}

.button-text:after {

display: none;

bottom: -75%;

background-image:

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%);

background-size:

15% 15%,

20% 20%,

18% 18%,

20% 20%,

15% 15%,

10% 10%,

20% 20%;

}

.button-text:active {

transform: scale(0.9);

}

在button-text的伪类元素上面，添加background-image,并用径向渐变radial-gradient画出多个圆作为粒子。

transform: scale(0.9)，是鼠标点击时，缩放button-text元素。

大家应该都看到默认伪类元素是display: none;隐藏的。所有当我们点击时，需要添加一个选择器，让其显示出来，并执行动画。

js来监听点击事件，点击后添加animate选择器。

var animateButton = function(e) {

e.preventDefault;

e.target.classList.remove('animate');

e.target.classList.add('animate');

setTimeout(function(){

e.target.classList.remove('animate');

},700);

};

var classname = document.getElementsByClassName("button-text");

for (var i = 0; i < classname.length; i++) {

classname[i].addEventListener('click', animateButton, false);

}

然后我们添加CSS，开始动画

.button-text.animate:before {

display: block;

animation: topBubbles ease-in-out 0.75s forwards;

}

.button-text.animate:after {

display: block;

animation: bottomBubbles ease-in-out 0.75s forwards;

}

@keyframes topBubbles {

0% {

background-position:

5% 90%,

10% 90%,

10% 90%,

15% 90%,

25% 90%,

25% 90%,

40% 90%,

55% 90%,

70% 90%;

}

50% {

background-position:

0% 80%,

0% 20%,

10% 40%,

20% 0%,

30% 30%,

22% 50%,

50% 50%,

65% 20%,

90% 30%;

}

100% {

background-position:

0% 70%,

0% 10%,

10% 30%,

20% -10%,

30% 20%,

22% 40%,

50% 40%,

65% 10%,

90% 20%;

background-size:

0% 0%,

0% 0%,

0% 0%,

0% 0%,

0% 0%,

0% 0%;

}

}

@keyframes bottomBubbles {

0% {

background-position:

10% -10%,

30% 10%,

55% -10%,

70% -10%,

85% -10%,

70% -10%,

70% 0%;

}

50% {

background-position:

0% 80%,

20% 80%,

45% 60%,

60% 100%,

75% 70%,

95% 60%,

105% 0%;

}

100% {

background-position:

0% 90%,

20% 90%,

45% 70%,

60% 110%,

75% 80%,

95% 70%,

110% 10%;

background-size:

0% 0%,

0% 0%,

0% 0%,

0% 0%,

0% 0%,

0% 0%;

}

}

我们通过background-position改变背景的位置，用background-size改变大小，来形成动画效果。

这样就形成按钮点击粒子动画效果了。

同理，我们可以在背景上面添加同样的粒子效果。代码基本可以copy。

背景粒子效果

.king:before {

position: absolute;

content: '';

display: block;

width: 100%;

height: 100%;

top: 0;

z-index: 1;

background-repeat: no-repeat;

opacity: 0.4;

}

.king:before {

background-image:

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%),

radial-gradient(circle, #fff 20%, transparent 20%);

background-size:

10% 10%,

12% 12%,

5% 5%,

12% 12%,

5% 5%,

10% 10%,

5% 5%,

10% 10%,

5% 5%;

display: block;

animation: topBubbles ease-in-out 3s forwards infinite;

}

这里我们改变一下粒子的大小，和透明度，以及层次(z-index)。让其一开始就执行动画，并且循环执行(infinite)。动画执行效果，我们直接用上面按钮的效果(topBubbles)即可。

粒子