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生成新鸳鸯蝴蝶梦效果