- 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>
CSS3 粒子效果
时间： 2024-07-29 06:19:45