页面添加漂浮物 掉礼物效果 掉红包效果

最近在做一个投票的项目  里面设计了一个漂浮物的效果 

就是天上掉礼物的效果  

html 不用写 礼物通过 js 直接加到body 里面

先上css代码

//漂浮物
    @keyframes mysnow {
        0% {
            bottom: 100%;
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-30deg);
            bottom: -10%;
        }
    }
    
    @-webkit-keyframes mysnow {
        0% {
            bottom: 100%;
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-30deg);
            bottom: -10%;
        }
    }
    
    @-moz-keyframes mysnow {
        0% {
            bottom: 100%;
            -moz-transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(-30deg);
            bottom: -10%;
        }
    }
    
    @-ms-keyframes mysnow {
        0% {
            bottom: 100%;
            -ms-transform: rotate(0deg);
        }
        100% {
            -ms-transform: rotate(-30deg);
            bottom: -10%;
        }
    }
    
    @-o-keyframes mysnow {
        0% {
            bottom: 100%;
            -o-transform: rotate(00deg);
        }
        100% {
            -o-transform: rotate(-30deg);
            bottom: -10%;
        }
    }
    
    .roll5 {
        position: absolute;
        animation: mysnow 20s linear;
        -webkit-animation: mysnow 20s  linear;
        -moz-animation: mysnow 20s linear;
        -ms-animation: mysnow 20s linear;
        -o-animation: mysnow 20s linear;
    }
    .roll4 {
        position: absolute;
        animation: mysnow 12s linear;
        -webkit-animation: mysnow 12s linear;
        -moz-animation: mysnow 12s linear;
        -ms-animation: mysnow 12s linear;
        -o-animation: mysnow 12s linear;
    }
    
    .roll3 {
        position: absolute;
        animation: mysnow 8s ease-out;
        -webkit-animation: mysnow 8s ease-out;
        -moz-animation: mysnow 8s ease-out;
        -ms-animation: mysnow 8s ease-out;
        -o-animation: mysnow 8s ease-out;
    }
    .roll {
        position: fixed;
        z-index: 9999999;
    }

.roll3  .roll4    .roll5  因为速度不一样 写了三个样式

下面写js代码 直接贴上去就好 注意 要有对应的图片哦  

            /*漂浮物*/
            function snow(left, top, src) {
        var img = document.createElement("img");
        img.className = "roll roll"+ Math.floor(Math.random() * 3 + 3) + "";
        img.src = src;  
        img.style.width = Math.random()*(1.2-0.6)+0.6 + "rem";
        img.style.height =  "auto";
        
        img.style.left = left + "px";
        img.style.bottom = "100%";
        document.getElementsByTagName("body")[0].appendChild(img);
      setTimeout(function() {
                    document.getElementsByTagName("body")[0].removeChild(img);
        }, 20000);
    }
    setInterval(function() {
        var left = Math.random() * window.innerWidth;
        var top =0;
       // var src = "images/gift" + Math.floor(Math.random() * 6 + 1) + ".png"; 
       var src = "images/gift2.png";
        snow(left, top, src);
    }, 1000);

            /*漂浮物end*/

图片的大小是随机的   img.style.width = Math.random()*(1.2-0.6)+0.6 + "rem";

图片也可设置为随机的  这里我注释掉了     var src = "images/gift" + Math.floor(Math.random() * 6 + 1) + ".png";

 

最后 页面效果来一张 

 

看完给个赞哦       技术交流可加微信好友 -- LOSTU5

转载于:https://www.cnblogs.com/lostu5/p/9290400.html