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

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

核心属性

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;}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

驾驭未来：抓住奇点冲击下的商机

[日]斋藤和纪 / 南浩洁 / 中国友谊出版公司 / 2018-9 / 52.00元

2020年左右，AI（人工智能）将超越人类的智力水平。2045年，人类将迎来“奇点”——科技进步的速度达到无限大。所有技术都在以空前的速度向前发展。同时，以往带来巨大财富的众多技术将走向“非货币化”。当下，人类正面临着被AI夺去工作的危机。许多传统行业（例如汽车制造业）将被彻底颠覆，但新的机会也在酝酿，技术的进步使得带宽成本、计算成本、存储成本等创新成本趋近于0，创业不再是资本、技术或信息......一起来看看《驾驭未来：抓住奇点冲击下的商机》这本书的介绍吧!

码农工具

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

核心属性

驾驭未来：抓住奇点冲击下的商机

CSS 压缩/解压工具

UNIX 时间戳转换

HEX CMYK 转换工具