HTML5怎么实现树叶飘落动画效果

这篇"HTML5怎么实现树叶飘落动画效果"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"HTML5怎么实现树叶飘落动画效果"文章吧。

这款HTML5树叶飘落动画是基于webkit内核的，因此要在webkit内核的浏览器上才能使用这款动画。

HTML代码

XML / HTML代码将内容复制到文本

< div id = "容器" >

<！-使用leaves.js中的init函数动态填充容器->

<！-它的尺寸和位置是使用leaves.css中的id选择器定义的->

< div id = " leafContainer" >

<！-它的外观，尺寸和位置是使用leaves.css中的id选择器定义的->

< div id = "消息" >

< em >这是基于webkit的落叶动画

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

{

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;

//将添加到

扫描关注千家信息网微信公众号，第一时间获取内容更新动态

转载请说明来源于"千家信息网"

本文地址：https://www.qianjiagd.com/a218257