CSS3常用动画总结

每隔一段时间，总结一下，前端之路，路且长，记录点滴成长。

• 加载中效果

加载中效果

动画加载的效果，首先第一步就是需要设置一个椭圆border-radius: 50%;，然后就是需要使用到border的样式，然后就是transform: rotate() 出现的旋转的效果。

第一步、设置椭圆

<!---->html的
<div id="demo"></div>

#demo {
        width: 10em;
	height: 10em;
	margin: 100px auto;
	border: 1.1em solid rgba(255, 255, 255, .2);
	border-left-color: #fff;
	border-radius: 50%;
}
复制代码

最终的效果如下：

第二步、设置帧

设置animation的属性

body {
    background: #000;
}
.spinner {
	width: 10em;
	height: 10em;
	margin: 100px auto;
	border: 1.1em solid rgba(255, 255, 255, .2);
	border-left-color: #fff;
	border-radius: 50%;
	-webkit-animation: load 1.1s infinite linear;
}
@-webkit-keyframes load {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
复制代码

最后的实现的效果：