這個東西實際上慕課的艾倫大大先寫的。

然后別人推薦給我，偶一直收藏著，然后偶再推薦給偶的隊友們，然后呢，這幫貨就懶得都不肯去看。。。

接著今天受傷在家就提出來了一點東西放在我博客頂上。。。

然后艾倫的原文呢在這里。http://www.imooc.com/learn/453

?

?

在開始前，按照慣例吐槽一下最近的狀況吧！昨天我騎車完成第4起車禍。然后打字只能靠6根指頭，還有腦袋也被來了一下。。。然后目測除了外傷，頭疼之外無大礙！吐槽點在與，程序員騎車的時候想的還是代碼。然后peng。最后既然入了這行了，還是別玩車了。。。T_T

?

飄花效果的實現

飄花的效果稍微復雜一點，有一定量的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.5var 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，，，這個看標題么就知道了

jQuery Transit還有這個東西

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

jquery對一些效果的擴展

?

轉載于:https://www.cnblogs.com/LoveOrHate/p/4731101.html

總結

以上是生活随笔為你收集整理的Jquery实现花瓣随机飘落（收藏自慕课网）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。