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

栏目: 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;}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

安全测试指南（第4版）

OWASP基金会 / 电子工业出版社 / 2016-7-1 / CNY 89.00

软件安全问题也许是这个时代面临的*为重要的技术挑战。Web应用程序让业务、社交等网络活动飞速发展，这同时也加剧了它们对软件安全的要求。我们急需建立一个强大的方法来编写和保护我们的互联网、Web应用程序和数据，并基于工程和科学的原则，用一致的、可重复的和定义的方法来测试软件安全问题。本书正是实现这个目标的重要一步，作为一本安全测试指南，详细讲解了Web应用测试的“4W1H”，即“什么是测试”、“为什......一起来看看《安全测试指南（第4版）》这本书的介绍吧!

码农工具

XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具

HEX CMYK 互转工具