CSS3 粒子效果

2024-09-05 12:18:44

字體：大中小

來源：轉載

供稿：網友

css3粒子效果，粒子飄飛效果，覺得挺不錯的效果。請注意，此為CSS3代碼，IE瀏覽器看不到效果，請使用IE9或火狐瀏覽器，或Chrome瀏覽器。

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>css3粒子效果</title></head><body><style type="text/css">#topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;}</style><script type="text/javascript">	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);	</script>	<canvas id="topcanvas"></canvas></body></html>

上一篇：Html5網頁時鐘，動畫版

下一篇：IE生成新鴛鴦蝴蝶夢效果