• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

使用CSS3制作转动的加载图标

因为代码比较简单,这里就不做过多的解释,直接贴出代码。

点我查看DEMO

下面是CSS代码:

.circle-loading {
	width: 20px;
	height: 20px;
	border: 2px solid #27ae61;
	border-radius: 50%;
	border-bottom: 2px solid transparent;
	animation: loading .5s infinite linear;
	-webkit-animation: loading .5s infinite linear;
	-moz-animation: loading .5s infinite linear;
	-o-animation: loading .5s infinite linear;
}
@keyframes loading {
	form {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes loading {
	form {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes loading {
	form {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}
@-o-keyframes loading {
	form {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(360deg);}
}

接着我们做一个对应class的div

<div class="circle-loading"></div>

大功告成

码字很辛苦,转载请注明来自雨林寒舍《使用CSS3制作转动的加载图标》

评论