HTML5怎么實現樹葉飄落動畫效果

這篇“HTML5怎么實現樹葉飄落動畫效果”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5怎么實現樹葉飄落動畫效果”文章吧。

這款HTML5樹葉飄落動畫是基于webkit內核的，因此要在webkit內核的瀏覽器上才能使用這款動畫。

HTML代碼

XML / HTML代碼將內容復制到文本

< div id = “容器” >   

  <！-使用leaves.js中的init函數動態填充容器->  

  <！-它的尺寸和位置是使用leaves.css中的id選擇器定義的->  

  < div id = “ leafContainer” > </ div >   

  <！-它的外觀，尺寸和位置是使用leaves.css中的id選擇器定義的->  

  < div id = “消息” >   

   < em >這是基于webkit的落葉動畫</ em >  

  </ div >  

</ div >  

CSS代碼

CSS代碼將內容復制到文本

#contai ner {   

    職位： 相對;   

    高度：  700px ;   

    寬度：  500px ;   

    保證金：  10px自動;    

    溢出： 隱藏;   

    邊框：  4px實心＃5C090A ;     

    背景：  ＃4E4226 URL （'圖像/ backgroundLeaves.jpg' ） 不重復頂左;      

}   

/ *定義leafContainer div的位置和尺寸* /  

#leaf容器    

{   

    職位： 絕對;   

    寬度：100％;   

    高度：100％;   

}   

/ *定義消息div的外觀，位置和尺寸* /  

#messag e   

{   

    職位： 絕對;   

    頂部：  160px ;   

    寬度：100％;   

    高度：  300px ;   

    背景：透明網址（'images / textBackground.png' ） 重復-x 中心；    

    顏色：  ＃5C090A ;   

    字體大小：220％;   

    字體家族：  “喬治亞” ；   

    text-align ：  center ;   

    填充：  20px 10px ;    

    -webkit-box-sizing： 邊框-box;   

    -webkit- background - size ：100％100％;   

    z索引：1；   

}   

p {   

  邊距：  15px ;   

}   

一個   

{   

  顏色：  ＃5C090A ;   

  文字裝飾： 無；   

}   

/ *設置“恐龍的園藝服務”消息的顏色* /  

EM    

{   

    font-weight ： 粗體;   

    字體樣式： 正常；   

}   

。電話 {   

  字體大小：150％;   

  垂直對齊： 中間;   

}   

/ *此CSS規則適用于leafContainer div中的所有div元素。  

   它為每個leafDiv設置樣式并設置動畫。  

* /  

#leafCo ntainer> DIV    

{   

    職位： 絕對;   

    寬度：  100px ;   

    高度：  100px ;   

    / *我們使用以下屬性將淡入淡出和拖放動畫應用于每個葉子。  

       這些屬性中的每一個都有兩個值。這些值分別與設置匹配 

       淡入淡出。  

    * /  

    -webkit-animation-iteration-count：無限，無限；   

    -webkit-animation-方向： 正常， 正常；   

    -webkit-animation-timing-function：線性，緩入；   

}   

/ *此CSS規則直接應用于div元素內的所有img元素，這些元素是  

   直接在leafContainer div內部。換句話說，它與'img'元素匹配 

   在createALeaf（）函數中創建的leafDivs中。  

* /  

#leafCotainer > div> img {   

     職位： 絕對;   

     寬度：  100px ;   

     高度：  100px ;   

    / *我們使用以下屬性來調整順時針旋轉或逆時針旋轉和翻轉  

       每片葉子上的動畫。  

       Leaves.js文件中的createALeaf函數確定葉子是否具有   

       順時針旋轉或逆時針旋轉和翻轉動畫。  

    * /  

     -webkit-animation-iteration-count：無限；   

     -webkit-animation-方向：備用；   

     -webkit-animation-timing-function：輕松輸入；   

     -webkit-transform-origin：50％-100％;   

}   

/ *在動畫的最后隱藏一片葉子* /  

@ -webkit-keyframes淡出   

{   

    / *在動畫的95％或以下時顯示一片葉子并將其隱藏，否則* /  

    0％{不透明度：1；}   

    95％{不透明度：1；}   

    100％{不透明度：0；}   

}   

/ *使葉子在y軸上從-300下降到600像素* /  

@ -webkit-keyframes放置   

{   

    / *在動畫開始時將葉子沿y軸移動到-300像素* /  

    0％{-webkit-transform：translate（0px ，-50px ）; }   

    / *在動畫結束時將葉子沿y軸移動到600像素* /  

    100％{-webkit-transform：translation（0px ，  650px ）; }   

}   

/ *在2D空間中將葉子從-50旋轉到50度* /  

@ -webkit-keyframes順時針旋轉   

{   

    / *在動畫開始時，在2D空間中將葉子旋轉-50度* /  

    0％{-webkit-transform：旋轉（-50deg）; }   

    / *動畫結束時，在2D空間中將葉子旋轉50度* /  

    100％{-webkit-transform：旋轉（50deg）; }   

}   

/ *翻轉葉子并將其在2D空間中從50度旋轉到-50度* /  

@ -webkit-keyframes逆時針旋轉    

{   

    / *動畫開始時翻轉葉子并將其在2D空間中旋轉50度* /  

    0％{-webkit-transform：scale（-1，1）rotation（50deg）; }   

    / *動畫結束時，在2D空間中翻轉葉子并將其旋轉-50度* /  

    100％{-webkit-transform：scale（-1，1）rotation（-50deg）; }   

}   

JavaScript代碼

JavaScript代碼將內容復制到

/ *定義動畫中要使用的葉子數* /  

const  NUMBER_OF_LEAVES = 30;   

/ *   

    當“落葉”頁面完全加載時調用。  

* /  

函數 init（）   

{   

    / *獲取將包含葉子的元素的引用* /  

    var  container = document.getElementById（'leafContainer' ）;   

    / *用新葉子填充空容器* /  

    對于 （var  i = 0; i <NUMBER_OF_LEAVES; i ++）    

    {   

        container.appendChild（createALeaf（））;   

    }   

}   

/ *  

    接收范圍的最低和最高值，  

    返回屬于該范圍的隨機整數。  

* /  

函數 randomInteger（low，high）   

{   

    返回 低+ Math.floor（Math.random（）*（高-低））;   

}   

/ *  

   接收范圍的最低和最高值，  

   返回落入該范圍內的隨機浮點數。  

* /  

函數 randomFloat（low，high）   

{   

    返回 低+ Math.random（）*（高-低）;   

}   

/ *  

    接收數字并返回其CSS像素值。  

* /  

函數 pixelValue（值）   

{   

    返回 值+  'px' ;   

}   

/ *  

    返回下降動畫的持續時間值。  

* /  

函數 durationValue（value）   

{   

    返回 值+  's' ;   

}   

/ *  

    使用img元素創建每個葉子。“ Leaves.css”實現兩次旋轉   

    葉子的動畫：clockwiseSpin和counterclockwiseSpinAndFlip。這個 

    函數確定應將這些旋轉動畫中的哪一個應用于每個葉子。  

* /  

函數 createALeaf（）   

{   

    / *首先創建包裝器div和一個空的img元素* /  

    var  leafDiv = document.createElement（'div' ）;   

    var  image = document.createElement（'img' ）;   

    / *隨機選擇一個葉子圖像并將其分配給新創建的元素* /  

    image.src =  'images / realLeaf'  + randomInteger（1，5）+ '. png  ' ;   

    leafDiv.style.top =  “ -100px” ;   

    / *將葉子沿屏幕放置在隨機位置* /  

    leafDiv.style.left = pixelValue（randomInteger（0，500））;   

    / *隨機選擇旋轉動畫* /  

    var  spinAnimationName =（Math.random（）<0.5）嗎？ 'clockwiseSpin'  ：  'counterclockwiseSpinAndFlip' ;   

    / *使用這些值設置-webkit-animation-name屬性* /  

    leafDiv.style.webkitAnimationName =  '淡入淡出' ;   

    image.style.webkitAnimationName = spinAnimationName;   

    / *找出淡入淡出動畫的隨機持續時間* /  

    var  fadeAndDropDuration = durationValue（randomFloat（5，11））;   

    / *找出旋轉動畫的另一個隨機持續時間* /  

    var  spinDuration = durationValue（randomFloat（4，8））;   

    / *使用這些值設置-webkit-animation-duration屬性* /  

    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration +  '，'  + fadeAndDropDuration;   

    var  leafDelay = durationValue（randomFloat（0，5））;   

    leafDiv.style.webkitAnimationDelay = leafDelay +  '，'  + leafDelay;   

    image.style.webkitAnimationDuration = spinDuration;   

    //將<img>添加到<div>   

    leafDiv.appendChild（image）;   

    / *返回此img元素，以便可以將其添加到文檔中* /  

    返回 leafDiv;   

}   

/ *當“落葉”頁面已滿時調用init函數* /  

window.addEventListener（'load' ，init，  false ）;   

以上就是關于“HTML5怎么實現樹葉飄落動畫效果”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。