前面介绍过多个css3 loading加载动画的实例，今天继续介绍另一个实例，这个实例用css3实现旋转圆盘的预加载动画。
css代码#preloader{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
-webkit-animation: preloader_1 1.5s infinite linear;
-moz-animation: preloader_1 1.5s infinite linear;
-ms-animation: preloader_1 1.5s infinite linear;
animation: preloader_1 1.5s infinite linear;
}
#preloader:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
-webkit-animation: preloader_1_after 1.5s infinite linear;
-moz-animation: preloader_1_after 1.5s infinite linear;
-ms-animation: preloader_1_after 1.5s infinite linear;
animation: preloader_1_after 1.5s infinite linear;
}
@-webkit-keyframes preloader_1 {
0% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(180deg);background:#2ecc71;}
100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes preloader_1_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-moz-keyframes preloader_1 {
0% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(180deg);background:#2ecc71;}
100% {-moz-transform: rotate(360deg);}
}
@-moz-keyframes preloader_1_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-ms-keyframes preloader_1 {
0% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(180deg);background:#2ecc71;}
100% {-ms-transform: rotate(360deg);}
}
@-ms-keyframes preloader_1_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@keyframes preloader_1 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);background:#2ecc71;}
100% {transform: rotate(360deg);}
}
@keyframes preloader_1_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
html代码
在这里，我们只需使用一个div作为中心圆，和在该div上用:after创建外部线条。
相关文章推荐