飄花效果的實現――效果圖：
需求：
一個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 type="text/javascript">$(function() { var snowflakeURl = [ 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png', 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png', 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png', 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png', 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png', 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png' ] //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() * 6)]]; } // 創建一個雪花元素 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() //結束后刪除 }); }, 200); } snowflake() //執行函數})</script>以上代碼就是本文使用jquery實現網頁背景花瓣隨機飄落特效，希望大家喜歡。
新聞熱點
疑難解答
