CSS粒子飛散效果是一種酷炫的網頁動畫效果,通過使用CSS屬性和JavaScript控制,可以實現美麗的粒子飛舞效果,從而增強整個網頁的特效體驗。
.particles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .particle{ position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff; opacity: 0; transform: scale(1); }
以上是CSS部分的粒子效果樣式代碼,我們可以通過設置粒子的位置、大小、顏色等來達到不同的效果。人們通常會選擇白色的小圓點搭配黑色背景來增強美感。
function createParticle(){ var particle = document.createElement('div'); particle.setAttribute('class','particle'); particle.setAttribute('style', 'left:'+Math.random()*100+'%;'+ 'top:'+Math.random()*100+'%;'+ 'background-color: rgba('+ Math.random()*255+','+ Math.random()*255+','+ Math.random()*255+','+ Math.random()+');'+ 'transform: scale('+Math.random()+');' ); document.body.appendChild(particle); setTimeout(function(){particle.remove();},3000); } setInterval(createParticle,100);
以上是JavaScript部分的代碼實現,通過定時器進行不斷生成粒子和刪除失效粒子的操作,從而實現粒子飛散效果。
總之,CSS粒子飛散效果是一種越來越流行的特效展示方式,其具有視覺沖擊力強、調整靈活、易實現等特點,給用戶帶來了全新的視覺體驗。
上一篇css鼠標滑過展示
下一篇css粒子特效變換文字