• 更多

登錄512收藏分享

CSS3中用background-image實現粒子動畫效果

原創2019-04-03 12:05·web秀

前言

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

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

所以用最簡單通俗的代碼，更能利於後期的維護開發。

ok！先來看看背景粒子動畫效果預覽圖：

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

按鈕點擊粒子動畫

<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); 
}

然後我們添加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）即可。