js流星雨效果

css部分

div {
           
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    /*变形*/
    transform: rotate(-135deg) translate3d(0px, 1px, 3px);
    transform-origin: 0% 100%; 
}

js部分

var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientWidth;
    function color(){//改变颜色
        var c = ['0','3','6','9','c','f'];
        var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
        console.log(t);
        t.sort(function(){  //排序如果是1倒续
            return Math.random()>0.5?-1:1;
              }
            );
        return '#'+t.join('');
    }
    function fn(){//创建div
        var b = document.createElement('div');
        b.style.borderColor=' transparent transparent transparent'+color();
        b.style.position = 'absolute';
        b.style.top = 0;
        b.style.left = Math.floor(Math.random()*w)+1+'px';
      
        document.body.appendChild(b);
       ydd()
          
    }
    function ydd(){//运动和销毁
         var div=document.getElementsByTagName('div');
         for(var i=0; i<div.length;i++){
               div[i].style.left=Math.ceil(Math.random()*9)+5+div[i].offsetLeft+'px';
               div[i].style.top=Math.ceil(Math.random()*9)+20+div[i].offsetTop+'px';
               if(div[i].offsetLeft>w || div[i].offsetTop>h){
                    div[i].parentNode.removeChild(div[i]);
               }
            }
            console.log(div.length);
    }
    
        setInterval(function(){
            fn()
        },100);

效果

转载于:https://www.cnblogs.com/aSnow/p/8920238.html