css动画小案例 弹力球

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

小案例效果

1.html结构布局

<ul>
	<li></li>
	<li></li>
</ul>

2.css布局样式

其实 animation 是可以设置复合样式的，为了便于练习，这里使用单样式进行书写。

<style>
	ul,ol{
		padding:0;
		list-style:none;
	}
	body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt{
		margin:0;
	}
	ul{
		position:relative;
		top:150px;
		width:50px;
		height:150px;
		margin:0 auto;
	}

	/* 弹力球动画 */
	ul li:nth-child(1){
		position:absolute;
		top:5px;
		left:10px;
		width:30px;
		height:30px;
		border-radius:50%;
		background-color:#ffff00;
		animation-name:ball;				/* 动画名字，与动画帧进行绑定 */
		animation-timing-function:ease;		/* 动画的速度曲线 */
		animation-duration:.7s;				/* 动画执行时间 */
		animation-iteration-count:infinite;	/*动画的播放次数，循环*/
	}

	/*动画帧，动画的播放器*/
	@keyframes ball{
	/*这里的百分比都是根据动画的时间来计算*/
		0%{
			margin-top:10px;
		}
		15%{
			margin-top:108px;
		}
		100%{
			margin-top:10px;
		}
	}

	/* 弹力球影子动画 */
	ul li:nth-child(2){
		position:absolute;
		bottom:0;
		left:10px;
		width:33px;
		height:10px;
		border-radius:50%;
		background-color:#f0f0f0;
		animation-name:ball-shadow;			/* 动画名字，与动画帧进行绑定 */
		animation-timing-function: ease;	/* 动画的速度曲线 */
		animation-duration:.7s;				/* 动画执行时间 */
		animation-iteration-count:infinite;	/*动画的播放次数，循环*/

	}

	/*动画帧，动画的播放器*/
	@keyframes ball-shadow{
	/*这里的百分比都是根据动画的时间来计算*/
		0%{}
		15%{
			width:31px;
			height:9px;
			background-color:#d3d3d3;
		}
		100%{}
	}
</style>

小案例比较简陋，欢迎留言探讨指正，勿喷。

:: 更多内容 ::

> 开发过程中踩坑经验记录