js实现红包雨案例，如何使用js实现红包雨

2020-10-12 阅读：2841 分类：前端标签： jquery

快到双11了，每到双11购物节，可以看到浏览器有红包雨特效，以下是一个简单实现红包雨特效的方法，供大家参考。

效果演示：

代码实现说明：

附件demo下载：https://github.com/jyblogs/hongbao

1、前端html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>红包雨</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/hb.js"></script>
</head>
<body>
<div id='petalbox'></div>
</body>
</html>

2、js代码

$(function(){
        var NUMBER_OF_LEAVES = 50;
        /*
         Called when the "Falling Leaves" page is completely loaded.
         */
        function init() {
            /* Get a reference to the element that will contain the leaves */
            var container = document.getElementById('petalbox');

            /* Fill the empty container with new leaves */
            try {
                for (var i = 0;
                     i < NUMBER_OF_LEAVES;

                     i++) {
                    container.appendChild(createALeaf());
                }
            }
            catch(e) {
            }
        }

        /*
         Receives the lowest and highest values of a range and
         returns a random integer that falls within that range.
         */
        function randomInteger(low, high) {
            return low + Math.floor(Math.random() * (high - low));
        }

        /*
         Receives the lowest and highest values of a range and
         returns a random float that falls within that range.
         */
        function randomFloat(low, high) {
            return low + Math.random() * (high - low);
        }

        /*
         Receives a number and returns its CSS pixel value.
         */
        function pixelValue(value) {
            return value + '%';
        }

        /*
         Returns a duration value for the falling animation.
         */
        function durationValue(value) {
            return value + 's';
        }

        /*
         Uses an img element to create each leaf. "Leaves.css" implements two spin
         animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
         function determines which of these spin animations should be applied to each leaf.

         */
        function createALeaf() {
            /* Start by creating a wrapper div, and an empty img element */
            var leafDiv = document.createElement('div');
            var image = document.createElement('img');

            /* Randomly choose a leaf image and assign it to the newly created element */
            image.src ='images/petal'+ randomInteger(1, 10) + '.png';

            /* Position the leaf at a random location along the screen */
            leafDiv.style.top = pixelValue(randomInteger(0, 10));
            leafDiv.style.left = pixelValue(randomInteger(70, 30));

            /* Randomly choose a spin animation */
            var spinAnimationName = (Math.random() < 0.5) ? '.':'counterclockwiseSpinAndFlip';        /* Set the -webkit-animation-name property with these values */
            
            // 随机动作，向左下，向下或向右下
            var dropList = ['drop-left', 'drop',  'drop-right'];
            var dropName = dropList[randomInteger(0, dropList.length)];
            
            leafDiv.style.webkitAnimationName ='fade, ' + dropName;
            leafDiv.style.animationName ='fade, ' + dropName;
            image.style.webkitAnimationName = spinAnimationName;
            image.style.animationName = spinAnimationName;

            /* 随机下落时间 */
            var fadeAndDropDuration = durationValue(randomFloat(2.2, 8.2));

            /* 随机旋转时间 */
            var spinDuration = durationValue(randomFloat(3, 4));

            leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
            leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

            // 随机delay时间
            var leafDelay = durationValue(randomFloat(0, 2));

            leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
            leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;
            image.style.webkitAnimationDuration = spinDuration;
            image.style.animationDuration = spinDuration;
            leafDiv.appendChild(image);
            return leafDiv;
        }
        
    var timeout = setTimeout(function () {
        init();
    },1000)


})

3、css代码

#petalbox {
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    z-index: 100;
    /*background-color: #ccc;*/
}
#petalbox > div {
    position: absolute;
    -webkit-animation-iteration-count: 1, 1;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
    -webkit-backface-visibility: hidden;
    animation-iteration-count: 1, 1;
    animation-direction: normal, normal;
    animation-timing-function: linear, ease-in;
    backface-visibility: hidden;
}
#petalbox > div > img {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-backface-visibility: hidden;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    backface-visibility: hidden;
}
@-webkit-keyframes fade {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes drop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 1100px, 0);
    }
}
@keyframes drop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 1100px, 0);
    }
}
@-webkit-keyframes drop-left {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-500px, 1100px, 0);
    }
}
@keyframes drop-left {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-500px, 1100px, 0);
    }
}
@-webkit-keyframes drop-right {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(500px, 1100px, 0);
    }
}
@keyframes drop-right {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(500px, 1100px, 0);
    }
}
@-webkit-keyframes clockwiseSpin {
    0% {
        -webkit-transform: none;
    }
    100% {
        -webkit-transform: rotate(480deg);
    }
}
@keyframes clockwiseSpin {
    0% {
        transform: none;
    }
    100% {
        transform: rotate(480deg);
    }
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
    0% {
        -webkit-transform: none;
    }
    100% {
        -webkit-transform: rotate(-480deg);
    }
}
}
@keyframes counterclockwiseSpinAndFlip {
    0% {
        transform: none;
    }
    100% {
        transform: rotate(-480deg);
    }
}
/*animation*/
.timenav .time_list .time1 {
    -webkit-animation: lantern_shake1 6s linear both;
    -webkit-transform-origin: center top;
    animation: lantern_shake1 6s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake1 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-4deg);
    }
    75% {
        -webkit-transform: rotate(4deg);
    }
}
@keyframes lantern_shake1 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
}
.timenav .time_list .time2 {
    -webkit-animation: lantern_shake2 6s linear both;
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;
    animation: lantern_shake2 6s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake2 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-6deg) translate3d(5px, 0, 0);
    }
    75% {
        -webkit-transform: rotate(6deg) translate3d(-5px, 0, 0);
    }
}
@keyframes lantern_shake2 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-6deg) translate3d(5px, 0, 0);
    }
    75% {
        transform: rotate(6deg) translate3d(-5px, 0, 0);
    }
}
.timenav .time_list .time3 {
    -webkit-animation: lantern_shake3 6s linear both;
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;
    animation: lantern_shake3 6s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake3 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-8deg) translate3d(14px, 0, 0);
    }
    75% {
        -webkit-transform: rotate(8deg) translate3d(-14px, 0, 0);
    }
}
@keyframes lantern_shake3 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-8deg) translate3d(14px, 0, 0);
    }
    75% {
        transform: rotate(8deg) translate3d(-14px, 0, 0);
    }
}
.timenav .time_list:hover a {
    -webkit-animation: none;
    animation: none;
}
.banner_tit, .banner_subtit {
    -webkit-animation: bounceInDown 0.8s both;
    animation: bounceInDown 0.8s both;
}
.banner_subtit {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        opacity: 1;
    }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.banner_time {
    -webkit-animation: fadeIn 1s 1.2s both;
    animation: fadeIn 1s 1.2s both;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fireworks i {
    -webkit-animation: fireworkani 1.6s .2s ease both;
    -webkit-animation-iteration-count: 2;
    animation: fireworkani 1.6s .2s ease both;
    animation-iteration-count: 2;
}
.fireworks .f2 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.fireworks .f3 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.fireworks .f4 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
@-webkit-keyframes fireworkani {
    0%, 9% {
        -webkit-transform: scale(.1);
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(.1);
        opacity: 1;
    }
    95% {
        -webkit-transform: scale(1.5);
        opacity: .1;
    }
    100% {
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes fireworkani {
    0%, 9% {
        transform: scale(.1);
        opacity: 0;
    }
    10% {
        transform: scale(.1);
        opacity: 1;
    }
    95% {
        transform: scale(1.5);
        opacity: .1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.main_before, .main_after, .main_cont {
    -webkit-animation: contfadein 1s .5s both;
    animation: contfadein 1s .5s both;
}
@-webkit-keyframes contfadein {
    0% {
        -webkit-transform: translate3d(0, 100px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        opacity: 1;
    }
}
@keyframes contfadein {
    0% {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
/*media*/
/*.small_window .timenav {
    left: 20px;
    margin-left: 0;
}*/

以上是个简单案例，点击后展示结果可以结合实际情况进行更改。