HTML5怎么实现树叶飘落动画效果
这篇“HTML5怎么实现树叶飘落动画效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5怎么实现树叶飘落动画效果”文章吧。
创新互联是专业的大兴安岭网站建设公司,大兴安岭接单;提供成都做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行大兴安岭网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
这款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 { 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 ); 以上就是关于“HTML5怎么实现树叶飘落动画效果”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
本文名称:HTML5怎么实现树叶飘落动画效果
文章链接:http://scyanting.com/article/igoeed.html