技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS3 Loading 旋转圆盘加载动画

作者:admin    时间:2020-7-31 9:29:19    浏览:

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

<div id="preloader"></div>

execcodegetcode

相关文章推荐

标签: css  css3  css-loading  加载动画  
  • IT热文
  • 站长推荐