前言

繼續(xù)前幾天的文章《王者榮耀匹配人員加載頁面動畫用純CSS擼出來，你信嗎?》，添加按鈕、背景粒子動畫效果。

其實(shí)在碼代碼的時(shí)候會發(fā)現(xiàn)，很多東西都是殊途同歸的，方法千千萬，能解決問題的都是好辦法，不一定非要把代碼寫的特別高深，這樣反而后來的人看不懂，維護(hù)根據(jù)頭疼。

所以用最簡單通俗的代碼，更能利于后期的維護(hù)開發(fā)。

ok!先來看看背景粒子動畫效果預(yù)覽圖：

 

 

以下代碼都是基于前一篇文章《王者榮耀匹配人員加載頁面動畫用純CSS擼出來，你信嗎?》的，所以沒有了解的可以先去看看這篇文章。

按鈕點(diǎn)擊粒子動畫

 

 

由于按鈕是梯形的，之前代碼在button選擇器上面已經(jīng)加了偽類來實(shí)現(xiàn)梯形了，所以我們只能再套一層元素(button-text)來實(shí)現(xiàn)粒子。

.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,并用徑向漸變r(jià)adial-gradient畫出多個(gè)圓作為粒子。

transform: scale(0.9)，是鼠標(biāo)點(diǎn)擊時(shí)，縮放button-text元素。

大家應(yīng)該都看到默認(rèn)偽類元素是display: none;隱藏的。所有當(dāng)我們點(diǎn)擊時(shí)，需要添加一個(gè)選擇器，讓其顯示出來，并執(zhí)行動畫。

js來監(jiān)聽點(diǎn)擊事件，點(diǎn)擊后添加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改變大小，來形成動畫效果。

這樣就形成按鈕點(diǎn)擊粒子動畫效果了。

同理，我們可以在背景上面添加同樣的粒子效果。代碼基本可以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)。讓其一開始就執(zhí)行動畫，并且循環(huán)執(zhí)行(infinite)。動畫執(zhí)行效果，我們直接用上面按鈕的效果(topBubbles)即可。