在碼代碼的時候會發現，很多東西都是殊途同歸的，方法千千萬，能解決問題的都是好辦法，不一定非要把代碼寫的特別高深，這樣反而后來的人看不懂，維護根據頭疼。
所以用最簡單通俗的代碼，更能利于后期的維護開發。
先來看看背景粒子動畫效果預覽圖：
按鈕點擊粒子動畫
<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）即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
