首页 > 代码库 > CSS3 粒子效果
CSS3 粒子效果
- css3粒子效果，粒子飘飞效果，觉得挺不错的效果。请注意，此为CSS3代码，IE浏览器看不到效果，请使用IE9或火狐浏览器，或Chrome浏览器。
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>接触角测定仪</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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。