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怎么实现树叶飘落动画效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。