圆环旋转加显隐的加载效果

栏目: Html · 发布时间: 5年前

核心属性

position: absolute 四个圆环的定位关系

animation + border-color 四分之一圆环的闪烁效果

animation + transform + opacity 圆环的旋转放大加显隐效果

```
<div class="wrap">
```
```
<div class="loader"></div>
```
```
<div class="loaderbefore"></div>
```
```
<div class="circular"></div>
```
```
<div class="circular another"></div>
```
```
<div class="text">加载中</div>
```
```
</div>
```

```
.wrap {
```
```
position: relative;
```
```
top: 150px;
```
```
width: 150px;
```
```
margin: 0 auto;
```
```
}
```
```
.loader {
```
```
position: absolute;
```
```
top: 0;
```
```
width: 50px;
```
```
height: 50px;
```
```
border: 15px solid;
```
```
border-radius: 50%;
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
animation: loadEr 3s infinite;
```
```
z-index: 2;
```
```
}
```
```
@keyframes loadEr {
```
```
0% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
10.4% {
```
```
border-top-color: rgba(44,44,44,0.5);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
20.8% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
31.2% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0.5);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
41.6% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
transform: rotate(40deg);
```
```
}
```
```
52% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```

border-bottom-color: rgba(66,66,66,0.5);

```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
62.4% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0);
```
```
}
```
```
72.8% {
```
```
border-top-color: rgba(44,44,44,0);
```
```
border-right-color: rgba(55,55,55,0);
```
```
border-bottom-color: rgba(66,66,66,0);
```
```
border-left-color: rgba(33,33,33,0.5);
```
```
}
```
```
}
```
```
.loaderbefore {
```
```
position: absolute;
```
```
top: 0;
```
```
width: 50px;
```
```
height: 50px;
```
```
border: 15px solid #ddd;
```
```
border-radius: 50%;
```
```
z-index: 1;
```
```
}
```
```
.circular {
```
```
position: absolute;
```
```
top: -15px;
```
```
left: -15px;
```
```
width: 70px;
```
```
height: 70px;
```
```
border: 20px solid;
```
```
border-radius: 50%;
```
```
border-top-color: #333;
```
```
border-left-color: #fff;
```
```
border-bottom-color: #333;
```
```
border-right-color: #fff;
```
```
opacity: 0.2;
```
```
animation: poof 5s infinite;
```
```
}
```
```
@keyframes poof {
```
```
0% {
```
```
transform: scale(1,1) rotate(0deg);
```
```
opacity: 0.2;
```
```
}
```
```
50% {
```
```
transform: scale(4,4) rotate(360deg);
```
```
opacity: 0;
```
```
}
```
```
}
```
```
.another {
```
```
transform: rotate(90deg);
```
```
animation: poofity 5s infinite;
```
```
animation-delay: 1s;
```
```
opacity: 0.1;
```
```
}
```
```
@keyframes poofity {
```
```
0% {
```
```
transform: scale(1,1) rotate(90deg);
```
```
opacity: 0.1;
```
```
}
```
```
50% {
```
```
transform: scale(4,4) rotate(-360deg);
```
```
opacity: 0;
```
```
}
```
```
}
```
```
.text {
```
```
position: absolute;
```
```
top: 95px;
```
```
left: 14px;
```
```
color: #888;
```
```
animation: opaa 10s infinite;
```
```
}
```
```
@keyframes opaa {
```
```
0% {opacity: 1;}
```
```
10% {opacity: 0.5}
```
```
15% {opacity: 1;}
```
```
30% {opacity: 1;}
```
```
65% {opacity: 0.3;}
```
```
90% {opacity: 0.8;}
```
```
}
```

以上所述就是小编给大家介绍的《圆环旋转加显隐的加载效果》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

知识的边界

[美] 戴维·温伯格 / 胡泳、高美 / 山西人民出版社 / 2014-12-1 / 42.00元

大数据时代反思知识因为事实不再是事实，专家随处可见所有确定性都被连根拔起，话题再无边界，没有人对任何事情能达成一致。在互联网的引领下，知识现在已经具有了社交性，流动且开放。温伯格向我们展示了这些特点如何可以为我们所用。 ——马克•贝尼奥夫（云计算之父，著有《云攻略》）这本富有洞见的著作，奠定了温伯格作为数字时代最重要的思想家之一的地位。如果你想要理解信息洪流涌......一起来看看《知识的边界》这本书的介绍吧!

码农工具

圆环旋转加显隐的加载效果

核心属性

知识的边界

XML 在线格式化

RGB HSV 转换

RGB CMYK 转换工具