android动画 树叶飘落,逼真的HTML5树叶飘落动画

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

原始码下载 演示地址

HTML代码

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

< div id = “容器” >

< div id = “ leafContainer” > div >

< 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

{

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;

//将添加到

leafDiv.appendChild(image);

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

返回 leafDiv;

}

/ *当“落叶”页面已满时调用init函数* /

window.addEventListener('load' ，init，  false );

以上就是本文的全部内容，希望对大家学习有所帮助。