CSS3實現王者匹配時的粒子動畫效果
摘要：
在碼程式碼的時候會發現，很多東西都是殊途同歸的，方法千千萬，能解決問題的都是好辦法，不一定非要把程式碼寫的特別高深，這樣反而後來的人看不懂，維護根據頭疼。
所以用最簡單通俗的程式碼，更能利於後期的維護開發。
先來看看背景粒子動畫效果預覽圖：
按鈕點選粒子動畫
...
在碼程式碼的時候會發現，很多東西都是殊途同歸的，方法千千萬，能解決問題的都是好辦法，不一定非要把程式碼寫的特別高深，這樣反而後來的人看不懂，維護根據頭疼。
所以用最簡單通俗的程式碼，更能利於後期的維護開發。
先來看看背景粒子動畫效果預覽圖：
按鈕點選粒子動畫
<div class="button"> <div class="button-text">確認</div> </div>
由於按鈕是梯形的，之前程式碼在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);
}
有句話叫做“方法不對，努力白費”所有的前端大神都有自己的學習方法，而學web前端的學習也基本一致，而對於一個什麼都不懂的初學者，根本不會知道該怎麼學，這也是造成失敗的最直接原因。所以學web前端一定要有人指點。如果你處在迷茫期，找不到方向。可以加入我們的前端學習交流qun： 784783012 。有任何不明白的東西隨時來問我。點選：前端學習圈
然後我們新增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）即可。