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%; 
}

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);