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