js/jq 花朵下落动画

html:

<div class="float-box" id="float-box">

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

    <li style=""><img

            class="not-js-style" src="https://img.haomeiwen.com/i6517590/354f700a5039648f.png"></li>

</div>

css:

/*页面漂浮物*/

.float-box li {

position:fixed;

    top: -20%;

    list-style:none;

    display:block;

    width:3rem;

    animation:downFloat 10s infinite;

    -webkit-transition-timing-function:linear;

    transition-timing-function:linear;

    z-index:10;

}

.float-box li img {

width:100%;

}

@keyframes downFloat {

0% {

top: -20%;

        -webkit-transform:translateY(0);

        transform:translateY(0)

}

100% {

top:110%;

        -webkit-transform:rotate(600deg);

        transform:rotate(600deg)

}

}

@keyframes upFloat {

0% {

-webkit-transform:translateY(0);

        transform:translateY(0)

}

100% {

-webkit-transform:translateY(-2000px)rotate(600deg);

        transform:translateY(-2000px)rotate(600deg)

}

}

js实现:

function playFloatBox(content, type) {

    var bom = type === 1 ? '<span><i class="fa fa-' + content + '"></i></span>' : '<img class="not-js-style" src="' + content + '">';

    for (var i = 0; i < 10; i++) {

        var floatId = document.getElementById("float-box")

        var p2 = document.createElement('li')

        p2.innerHTML = bom

        floatId.appendChild(p2)

}

    var param = {

        delay: [400, 12000],

        left: [0, 90],

        duration: [2000, 20000],

        width: [2, 5]

};

    document.querySelectorAll(".float-box li").forEach(function (item,index) {

        var i = index + 1;

        item.setAttribute("id", i)

        var delay = Math.floor(param.delay[0] + Math.random() * (param.delay[1] - param.delay[0])) + Math.floor(200 + Math.random() * (200 - 50));

        var left = Math.floor(param.left[0] + Math.random() * (param.left[1] - param.left[0]));

        var duration = Math.floor(param.duration[0] + Math.random() * (param.duration[1] - param.duration[0])) + Math.floor(1000 + Math.random() * (1000 - 200));

        var width = Math.floor(param.width[0] + Math.random() * (param.width[1] - param.width[0]));

        var oDiv = document.getElementById(i);

        function setStyle(obj,json){------

            for(var i in json)

{

                obj.style[i]=json[i];

}

}

        setStyle(oDiv, {left: left + '%', animationDelay:  delay + "ms", animationDuration: duration + "ms", width: width + 'rem',fontSize: width + 'rem'});

});

}

playFloatBox("https://img.haomeiwen.com/i6517590/354f700a5039648f.png", 1)

jq实现：

function playFloatBox(content, type) {

        var bom = type === 1 ? '<span><i class="fa fa-' + content + '"></i></span>' : '<img class="not-js-style" src="' + content + '">';

        for (var i = 0; i < 10; i++) {

            $('.float-box').append('<li>' + bom + '</li>')

        }

        var param = {

            delay: [400, 12000],

            left: [0, 90],

            duration: [2000, 20000],

            width: [2, 5]

        };

        $('.float-box li').each(function (index) {

            var i = index + 1;

            var delay = Math.floor(param.delay[0] + Math.random() * (param.delay[1] - param.delay[0])) + Math.floor(200 + Math.random() * (200 - 50));

            var left = Math.floor(param.left[0] + Math.random() * (param.left[1] - param.left[0]));

            var duration = Math.floor(param.duration[0] + Math.random() * (param.duration[1] - param.duration[0])) + Math.floor(1000 + Math.random() * (1000 - 200));

            var width = Math.floor(param.width[0] + Math.random() * (param.width[1] - param.width[0]));

            $('.float-box li:nth-child(' + i + ')').css({

                left: left + '%',

                animationDelay: delay + "ms",

                animationDuration: duration + "ms",

                width: width + 'rem',

                fontSize: width + 'rem'

            });

        });

    }

    playFloatBox("https://img.haomeiwen.com/i6517590/354f700a5039648f.png", 2)