HTML动画 - 爱码网

开发工具与关键技术：DW与 HTML、javascript
作者：谢钟焕
撰写时间：2019/04/11

在本文中主要的知识点就是：

怎么使用javascript为标签添加动画
一些动画的特性

HTML代码：

<body>
<div class="content">
		<div id="widthfanwei"></div>	
</div>
</body>

CSS代码：

<style>	.content{position: relative;width:100%;	height: 700px;overflow: hidden;}
		#widthfanwei{position: absolute;width:100%;	height:700px;}
		/*落下div样式 */
		#widthfanwei > div{position: absolute;width:100px;height:100px;			
			/*提前填写动画属性*/
			animation-iteration-count: infinite, infinite;/*运动次数*/
			animation-direction: normal, normal;/*规定完成的时间*/
			animation-timing-function: linear, ease-in;/*过渡时间*/	}		
		/*落下img样式 */  
		#widthfanwei > div > img{position: absolute;width:70px;height: 70px;		
			/*提前填写动画属性*/
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-timing-function: ease-in-out;
			transform-origin: 50% -100%;
/*			overflow: hidden;*/}
		/*定义动画*/
		@keyframes SAH{/*开始的时候显示*/0% {opacity: 1;}95% {opacity: 1;}/*结束后隐藏*/
			100% {opacity: 0;}}
		/*到达最后距离，隐藏*/
		@keyframes drop{0% {-webkit-transform: translate(0px,-50px);}
100% {-webkit-transform: translate(0px,-1050px);}}		
		/*左旋转，动画*/
		@keyframes leftframe{0% {transform: rotate(-50deg);}100% {transform: rotate(50deg);}}		
		/*右旋转，动画*/
		@keyframes rightframe{0% {transform: rotate(50deg);}100% {transform: rotate(-50deg);}}</style>

接下来就是最重要的Javascript代码

<script>/*定义下落数量*/	var Num = 60; //创建落下div与img
		function createEle(){
			var div = document.createElement('div');
			var img = document.createElement('img');			
			img.src = 'png/img' + RandomInt(1,4) + '.png';//给img的src赋值	
			//出现位置
			div.style.top="850px";
			//在宽度中出现的位置
			div.style.left = px(RandomInt(0,1920));			
			//调用动画
			var swayanimation = (Math.random() < 0.5) ? 'leftframe' : 'rightframe';	
			//将动画赋值给div
			div.style.webkitAnimationName = 'SAH,drop';
			//将动画赋值给img
			img.style.webkitAnimationName = swayanimation;			
			//消失持续时间
			var DropTime = s(RandomFloat(5,11));			
			//div消失动画完成时间
			div.style.webkitAnimationDuration = DropTime + ',' + DropTime;			
			//旋转所需时间
			var RotateTime = s(RandomFloat(4,8));			
			//img旋转完成时间
			img.style.webkitAnimationDuration = RotateTime;					
			//延迟时间
			var DelayTime = s(RandomFloat(0,5));
			//div下落延迟时间
			div.style.webkitAnimationDelay = DelayTime + ',' + DelayTime;			
			//在div中创建img
			div.appendChild(img);			
			//返回一个div
			return div;} //数值范围内的随机整数
		function RandomInt(X,D){return X + Math.floor(Math.random() * (D - X));} 
//数值范围内的随机浮点数
		function RandomFloat(X,D){return X + Math.random() * (D - X);} //px
		function px(value){return value + 'px';} 
//秒s
		function s(value){return value + 's';}
//调用创建div与创建img方法
		function ADfunction()
		{
			var widthDIV = document.getElementById("widthfanwei");
			for(var i = 0;i < Num;i++)
			{
				widthDIV.appendChild(createEle());
			}
		}
	ADfunction();
</script>

//最后调用ADfunction()方法来进行添加div、img

效果图：
HTML动画
02.

花瓣由下往上飘，若设置从上往下飘则，修改css代码中的drop动画，将100%中的第二个值取反即可。