jquery+css3实现网页背景花瓣随机飘落特效【转】

随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下

飘花效果的实现——效果图：

需求：

一个jquery，，，这个看标题么就知道了

jQuery Transit还有这个东西

http://github.com/rstacruz/jquery.transit

jquery对一些效果的扩展

飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现

      飘花比人物的层级都高
      飘花数量非常多
      飘花会有一定的轨迹运动
      飘花带有渐变的效果
      飘花带有旋转的效果
      飘花落到地面会消失

这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以

实现原理：

通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程：

getImagesName随机6张图片，snowflakeURl定义一个地址的范围

createSnowBox创建雪花元素的节点，并且增加一个snowRoll的样式，也就是旋转的关键帧实现

定时器设置200ms不断的生成雪花对象，计算出3个属性的初始值，通过createSnowBox创建雪花元素，并且附上初始值，然后执行transition附上最终值，执行动画

动画结束后执行$(this).remove()  删除这个对象

然后精简一下代码，因为我只要飘花效果

<div id='content'>
    <!-- 飘花 -->
    <div id="snowflake"></div>
</div>

获取外面#content的宽高

然后#snowflake里面做效果

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

然后么css么就是这样了，top：42px是因为我的导航高度

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

这里是给飘花加旋转之类的css3特技

        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script src="xxx/js/jquery.transit.js"></script>        
        <script type="text/javascript">
            $(function() {

                var snowflakeURl = [
                    'img/timg.jpg',
                    'img/timg.jpg',
                    'img/timg.jpg',
                    'img/timg.jpg',
                    'img/timg.jpg',
                    'img/timg.jpg',
                ] //js设置数组存储6张花瓣的图片

                var container = $("#content");
                visualWidth = container.width();
                visualHeight = container.height();
                //获取content的宽高
                ///////
                //飘雪花 //
                ///////
                function snowflake() {
                    // 雪花容器
                    var $flakeContainer = $('#snowflake');

                    // 随机六张图
                    function getImagesName() {
                        return snowflakeURl[[Math.floor(Math.random() * 7)]];
                    }
                    // 创建一个雪花元素
                    function createSnowBox() {
                        var url = getImagesName();
                        return $('<div class="snowbox" />').css({
                            'width': 41,
                            'height': 41,
                            'position': 'absolute',
                            'backgroundSize': 'cover',
                            'zIndex': 100000,
                            'top': '-41px',
                            'backgroundImage': 'url(' + url + ')'
                        }).addClass('snowRoll');
                    }
                    // 开始飘花
                    setInterval(function() {
                        // 运动的轨迹
                        var startPositionLeft = Math.random() * visualWidth - 100,
                            startOpacity = 1,
                            endPositionTop = visualHeight - 40,
                            endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
                            duration = visualHeight * 10 + Math.random() * 5000;

                        // 随机透明度，不小于0.5
                        var randomStart = Math.random();
                        randomStart = randomStart < 0.5 ? startOpacity : randomStart;
                        // 创建一个雪花
                        var $flake = createSnowBox();
                        // 设计起点位置
                        $flake.css({
                            left: startPositionLeft,
                            opacity: randomStart
                        });
                        // 加入到容器
                        $flakeContainer.append($flake);
                        // 开始执行动画
                        /* $flake.transition({
                            top: endPositionTop,
                            left: endPositionLeft,
                            opacity: 0.7
                        }, duration, 'ease-out', function() {
                            $(this).remove() //结束后删除
                        }); */
                        
                        //jquery 不引入其他js写法
                        $flake.animate({
                            top: endPositionTop,
                            left: endPositionLeft,
                            opacity: 0.7
                        }, duration, 'linear', function() {
                            $(this).remove() //结束后删除
                        });

                    }, 200);
                }
                snowflake()
                //执行函数

            })
        </script>

以上代码就是本文使用jquery实现网页背景花瓣随机飘落特效，希望大家喜欢。