前面介绍过多个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创建外部线条。

相关文章推荐