css3粒子效果

#topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;}

function $(id){

return typeof id === "string" ? document.getElementById(id) : id;

}

(function (window, undefined) {

if (window.ZHJ) {

return;

}

// }

var ZHJ = window.ZHJ = {};

//粒子效果

ZHJ.drawPartical = {

drawFunction : function(ctx,r){//構造粒子模板－－公用函數

ctx.save();

ctx.beginPath();

ctx.moveTo(r,0);

for(var i=0;i<10;i++){

ctx.rotate(Math.PI/Math.random()*20);

ctx.lineTo(r,0);

}

ctx.closePath();

ctx.fill();

ctx.restore();

},

drawImplement : function(){//粒子效果－－產生粒子，定制密度，顏色

setInterval(function(){

var topcCanvas = $('topcanvas');

var ctx = topcCanvas.getContext('2d');

ctx.fillStyle = '#fff';//畫布顏色

ctx.fillRect(0,0,300,150);//填充區域的大小為200*150

ctx.save();

ctx.beginPath();

for(var j=1;j<100;j++){//生成粒子密度

ctx.save();

ctx.fillStyle = '#ccc';//粒子顏色

ctx.translate(300-Math.floor(Math.random()*300),75-Math.floor(Math.random()*150));

ZHJ.drawPartical.drawFunction(ctx,Math.floor(Math.random()*4));//粒子生成

ctx.restore();

}

ctx.restore();

},100);

}

};

ZHJ.drawPartical.drawImplement();//粒子－－頁面執行處

})(window);

總結

以上是生活随笔為你收集整理的粒子文字特效css,CSS3 粒子效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。