網頁制作教程 backgroundimage用法 _用法

登錄512收藏分享
CSS3中用background-image實現粒子動畫效果原創2019-04-03 12:05·web秀
前言繼續前幾天的文章《王者榮耀匹配人員加載頁面動畫用純CSS擼出來，你信嗎？》，添加按鈕、背景粒子動畫效果。
其實在碼代碼的時候會發現，很多東西都是殊途同歸的，方法千千萬，能解決問題的都是好辦法，不一定非要把代碼寫的特別高深，這樣反而后來的人看不懂，維護根據頭疼。
【網頁制作教程 backgroundimage用法】所以用最簡單通俗的代碼，更能利于后期的維護開發。
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）即可。