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實現網頁背景花瓣隨機飄落特效，希望大家喜歡。