頁面添加漂浮物 掉禮物效果 掉紅包效果

最近在作一個投票的項目  裏面設計了一個漂浮物的效果 

就是天上掉禮物的效果  

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