HTML5怎么實(shí)現(xiàn)樹(shù)葉飄落動(dòng)畫(huà)效果

這篇“HTML5怎么實(shí)現(xiàn)樹(shù)葉飄落動(dòng)畫(huà)效果”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“HTML5怎么實(shí)現(xiàn)樹(shù)葉飄落動(dòng)畫(huà)效果”文章吧。

這款HTML5樹(shù)葉飄落動(dòng)畫(huà)是基于webkit內(nèi)核的，因此要在webkit內(nèi)核的瀏覽器上才能使用這款動(dòng)畫(huà)。

HTML代碼

XML / HTML代碼將內(nèi)容復(fù)制到文本

< div id = “容器” >   

  <！-使用leaves.js中的init函數(shù)動(dòng)態(tài)填充容器->  

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

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

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

  < div id = “消息” >   

   < em >這是基于webkit的落葉動(dòng)畫(huà)</ em >  

  </ div >  

</ div >  

CSS代碼

CSS代碼將內(nèi)容復(fù)制到文本

#contai ner {   

    職位： 相對(duì);   

    高度：  700px ;   

    寬度：  500px ;   

    保證金：  10px自動(dòng);    

    溢出： 隱藏;   

    邊框：  4px實(shí)心＃5C090A ;     

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

}   

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

#leaf容器    

{   

    職位： 絕對(duì);   

    寬度：100％;   

    高度：100％;   

}   

/ *定義消息div的外觀(guān)，位置和尺寸* /  

#messag e   

{   

    職位： 絕對(duì);   

    頂部：  160px ;   

    寬度：100％;   

    高度：  300px ;   

    背景：透明網(wǎng)址（'images / textBackground.png' ） 重復(fù)-x 中心；    

    顏色：  ＃5C090A ;   

    字體大小：220％;   

    字體家族：  “喬治亞” ；   

    text-align ：  center ;   

    填充：  20px 10px ;    

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

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

    z索引：1；   

}   

p {   

  邊距：  15px ;   

}   

一個(gè)   

{   

  顏色：  ＃5C090A ;   

  文字裝飾： 無(wú)；   

}   

/ *設(shè)置“恐龍的園藝服務(wù)”消息的顏色* /  

EM    

{   

    font-weight ： 粗體;   

    字體樣式： 正常；   

}   

。電話(huà) {   

  字體大?。?50％;   

  垂直對(duì)齊： 中間;   

}   

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

   它為每個(gè)leafDiv設(shè)置樣式并設(shè)置動(dòng)畫(huà)。  

* /  

#leafCo ntainer> DIV    

{   

    職位： 絕對(duì);   

    寬度：  100px ;   

    高度：  100px ;   

    / *我們使用以下屬性將淡入淡出和拖放動(dòng)畫(huà)應(yīng)用于每個(gè)葉子。  

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

       淡入淡出。  

    * /  

    -webkit-animation-iteration-count：無(wú)限，無(wú)限；   

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

    -webkit-animation-timing-function：線(xiàn)性，緩入；   

}   

/ *此CSS規(guī)則直接應(yīng)用于div元素內(nèi)的所有img元素，這些元素是  

   直接在leafContainer div內(nèi)部。換句話(huà)說(shuō)，它與'img'元素匹配 

   在createALeaf（）函數(shù)中創(chuàng)建的leafDivs中。  

* /  

#leafCotainer > div> img {   

     職位： 絕對(duì);   

     寬度：  100px ;   

     高度：  100px ;   

    / *我們使用以下屬性來(lái)調(diào)整順時(shí)針旋轉(zhuǎn)或逆時(shí)針旋轉(zhuǎn)和翻轉(zhuǎn)  

       每片葉子上的動(dòng)畫(huà)。  

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

       順時(shí)針旋轉(zhuǎn)或逆時(shí)針旋轉(zhuǎn)和翻轉(zhuǎn)動(dòng)畫(huà)。  

    * /  

     -webkit-animation-iteration-count：無(wú)限；   

     -webkit-animation-方向：備用；   

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

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

}   

/ *在動(dòng)畫(huà)的最后隱藏一片葉子* /  

@ -webkit-keyframes淡出   

{   

    / *在動(dòng)畫(huà)的95％或以下時(shí)顯示一片葉子并將其隱藏，否則* /  

    0％{不透明度：1；}   

    95％{不透明度：1；}   

    100％{不透明度：0；}   

}   

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

@ -webkit-keyframes放置   

{   

    / *在動(dòng)畫(huà)開(kāi)始時(shí)將葉子沿y軸移動(dòng)到-300像素* /  

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

    / *在動(dòng)畫(huà)結(jié)束時(shí)將葉子沿y軸移動(dòng)到600像素* /  

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

}   

/ *在2D空間中將葉子從-50旋轉(zhuǎn)到50度* /  

@ -webkit-keyframes順時(shí)針旋轉(zhuǎn)   

{   

    / *在動(dòng)畫(huà)開(kāi)始時(shí)，在2D空間中將葉子旋轉(zhuǎn)-50度* /  

    0％{-webkit-transform：旋轉(zhuǎn)（-50deg）; }   

    / *動(dòng)畫(huà)結(jié)束時(shí)，在2D空間中將葉子旋轉(zhuǎn)50度* /  

    100％{-webkit-transform：旋轉(zhuǎn)（50deg）; }   

}   

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

@ -webkit-keyframes逆時(shí)針旋轉(zhuǎn)    

{   

    / *動(dòng)畫(huà)開(kāi)始時(shí)翻轉(zhuǎn)葉子并將其在2D空間中旋轉(zhuǎn)50度* /  

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

    / *動(dòng)畫(huà)結(jié)束時(shí)，在2D空間中翻轉(zhuǎn)葉子并將其旋轉(zhuǎn)-50度* /  

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

}   

JavaScript代碼

JavaScript代碼將內(nèi)容復(fù)制到

/ *定義動(dòng)畫(huà)中要使用的葉子數(shù)* /  

const  NUMBER_OF_LEAVES = 30;   

/ *   

    當(dāng)“落葉”頁(yè)面完全加載時(shí)調(diào)用。  

* /  

函數(shù) init（）   

{   

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

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

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

    對(duì)于 （var  i = 0; i <NUMBER_OF_LEAVES; i ++）    

    {   

        container.appendChild（createALeaf（））;   

    }   

}   

/ *  

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

    返回屬于該范圍的隨機(jī)整數(shù)。  

* /  

函數(shù) randomInteger（low，high）   

{   

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

}   

/ *  

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

   返回落入該范圍內(nèi)的隨機(jī)浮點(diǎn)數(shù)。  

* /  

函數(shù) randomFloat（low，high）   

{   

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

}   

/ *  

    接收數(shù)字并返回其CSS像素值。  

* /  

函數(shù) pixelValue（值）   

{   

    返回 值+  'px' ;   

}   

/ *  

    返回下降動(dòng)畫(huà)的持續(xù)時(shí)間值。  

* /  

函數(shù) durationValue（value）   

{   

    返回 值+  's' ;   

}   

/ *  

    使用img元素創(chuàng)建每個(gè)葉子?！?Leaves.css”實(shí)現(xiàn)兩次旋轉(zhuǎn)   

    葉子的動(dòng)畫(huà)：clockwiseSpin和counterclockwiseSpinAndFlip。這個(gè) 

    函數(shù)確定應(yīng)將這些旋轉(zhuǎn)動(dòng)畫(huà)中的哪一個(gè)應(yīng)用于每個(gè)葉子。  

* /  

函數(shù) createALeaf（）   

{   

    / *首先創(chuàng)建包裝器div和一個(gè)空的img元素* /  

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

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

    / *隨機(jī)選擇一個(gè)葉子圖像并將其分配給新創(chuàng)建的元素* /  

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

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

    / *將葉子沿屏幕放置在隨機(jī)位置* /  

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

    / *隨機(jī)選擇旋轉(zhuǎn)動(dòng)畫(huà)* /  

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

    / *使用這些值設(shè)置-webkit-animation-name屬性* /  

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

    image.style.webkitAnimationName = spinAnimationName;   

    / *找出淡入淡出動(dòng)畫(huà)的隨機(jī)持續(xù)時(shí)間* /  

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

    / *找出旋轉(zhuǎn)動(dòng)畫(huà)的另一個(gè)隨機(jī)持續(xù)時(shí)間* /  

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

    / *使用這些值設(shè)置-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;   

}   

/ *當(dāng)“落葉”頁(yè)面已滿(mǎn)時(shí)調(diào)用init函數(shù)* /  

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

以上就是關(guān)于“HTML5怎么實(shí)現(xiàn)樹(shù)葉飄落動(dòng)畫(huà)效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。