←水@痕→
若水无痕
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Colors Rain</title>
  </head>
  <style>
  html,body{
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  }
  .star{
   
  background: url(bullet.png);
  }
  </style>
  <body>
   
  </body>
  <script>
  var ww=window.innerWidth;
  var hh=window.innerHeight;
  var x,y;
  function snow(){
   
  this.x=Math.random()*ww;
  this.y=Math.random()*hh;
  this.r=Math.random()*255;
  this.g=Math.random()*255;
  this.b=Math.random()*255;
  this.v=Math.random()*10+5;
  this.w=1;
  this.h=Math.random()*40+15;
  this.color='#'+('00000'+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6)
   
  this.create()
  }
  snow.prototype={
  create:function(){
  this.node =document.createElement('div');
  this.node.style.position='absolute';
   
  this.node.style.left=this.x+'px';
  this.node.style.width=this.w+'px';
  this.node.style.height=this.h+'px';
   
  this.node.style.transform='rotateX(30deg) translateX(-10px)'
  this.node.style.backgroundColor=this.color;
  document.body.appendChild(this.node);
  },
  move:function(){
  this.y=this.y+this.v;
  if(this.y>=hh){
  this.y=0;
  }
  // if(y-10>this.y>y+10||x-10<this.x<x+10){
  // this.v=0;
  // ;
  // }
  this.x=this.x+this.v*Math.cos(-30);
  if(this.x>=ww){
  this.x=0;
  }
  this.node.style.left=this.x+'px';
  this.node.style.top=this.y*0.9+'px';
   
  }
  }
   
   
  function gosnow(){
  var snowarr=[];
   
  for(var i=0;i<150;i++){
  var snows= new snow();
  snowarr.push(snows);
   
   
  }
  setInterval(function(){
  for(var j=snowarr.length-1;j>=0;j--){
  snowarr[j].move()
  }
  },1000/30)
  }
  gosnow(
   
  )
  document.onmousemove=function(ev){
  var ev=window.ev||ev;
  x= ev.clientX;
  y=ev.clientY;
  console.log(x,y)
  }
  </script>
  </html>
   

 

posted on 2017-12-11 15:05  若水无痕  阅读(97)  评论(0编辑  收藏  举报