wordpress下雪效果[日常]

css插入下面代码

  1. #Snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;background:rgba(225,225,225,.1);pointer-events:none}  

再头部或者尾部插入

  1. <canvas id="Snow"></canvas>  
  2.     <script>  
  3.     (function(){var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};window.requestAnimationFrame=requestAnimationFrame;})();  
  4.     (function(){  
  5.         var flakes=[],canvas=document.getElementById("Snow"),ctx=canvas.getContext("2d"),flakeCount=150,mX=-100,mY=-100;  
  6.         canvas.width=window.innerWidth;  
  7.         canvas.height=window.innerHeight;  
  8.         function snow(){  
  9.             ctx.clearRect(0,0,canvas.width,canvas.height);  
  10.             for(var i=0;i<flakeCount;i++){  
  11.                 var flake=flakes[i],x=mX,y=mY,minDist=100,x2=flake.x,y2=flake.y;  
  12.                 var dist=Math.sqrt((x2-x)*(x2-x)+(y2-y)*(y2-y)),dx=x2-x,dy=y2-y;  
  13.                 if(dist<minDist){  
  14.                     var force=minDist/(dist*dist),xcomp=(x-x2)/dist,ycomp=(y-y2)/dist,deltaV=force/2;  
  15.                     flake.velX-=deltaV*xcomp;  
  16.                     flake.velY-=deltaV*ycomp;  
  17.                 }else{  
  18.                     flake.velX*=0.98;  
  19.                     if(flake.velY<=flake.speed){flake.velY = flake.speed;}  
  20.                     flake.velX+=Math.cos(flake.step+=.05)*flake.stepSize;  
  21.                 }  
  22.                 ctx.fillStyle="rgba(255,255,255,"+flake.opacity+")";  
  23.                 flake.y+=flake.velY;  
  24.                 flake.x+=flake.velX;  
  25.                 if(flake.y>=canvas.height||flake.y<=0){reset(flake);}  
  26.                 if(flake.x>=canvas.width||flake.x<=0){reset(flake);}  
  27.                 ctx.beginPath();  
  28.                 ctx.arc(flake.x,flake.y,flake.size,0,Math.PI*2);  
  29.                 ctx.fill();  
  30.             }  
  31.             requestAnimationFrame(snow);  
  32.         };  
  33.         function reset(flake){  
  34.             flake.x=Math.floor(Math.random()*canvas.width);  
  35.             flake.y=0;  
  36.             flake.size=(Math.random()*3)+2;  
  37.             flake.speed=(Math.random()*1)+0.5;  
  38.             flake.velY=flake.speed;  
  39.             flake.velX=0;  
  40.             flake.opacity=(Math.random()*0.5)+0.3;  
  41.         }  
  42.         function init(){  
  43.             for(var i=0;i<flakeCount;i++){  
  44.                 var x=Math.floor(Math.random()*canvas.width),y=Math.floor(Math.random()*canvas.height),size=(Math.random()*3)+2,speed=(Math.random()*1)+0.5,opacity=(Math.random()*0.5)+0.3;  
  45.                 flakes.push({speed:speed,velY:speed,velX:0,x:x,y:y,size:size,stepSize:(Math.random())/30*1,step:0,angle:180,opacity:opacity});  
  46.             }  
  47.             snow();  
  48.         };  
  49.         document.addEventListener("mousemove",function(e){mX=e.clientX,mY=e.clientY});  
  50.         window.addEventListener("resize",function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;});  
  51.         init();  
  52.     })();  
  53.     </script>  
   

如果资源下载失效请到 留言板 留言或者 QQ 联系我。

本站默认解压密码：www.hibbba.com

(゜-゜)つロ 干杯~
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: