jquery css3實作網頁背景花瓣隨機飄落特效_javascript技巧

飄花效果的實現－效果圖：

查看示範  原始碼下載

需求：

一個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麼就是這樣了，頂：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 &#63; 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實現網頁背景花瓣隨機飄落特效，希望大家喜歡。