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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

商业的常识

申音 / 山西经济出版社 / 2011-7-1 / 35.00元

★为什么美国没有史玉柱，中国没有乔布斯？ ★什么是“对的行业”、“错的行业”？ ★我们需要什么样的营销？ ★老板为什么要读商学院？ ★山寨公司还需要管理吗？ ★资源问题是个“伪问题”？ ★别把商业模式当成葵花宝典 ★给海归技术创业兄弟的九个忠告 ★在一个不伟大的行业里，做一个伟大的公司 ★是什么让互联网遭遇了有史以来最鸡犬不宁的一战？一起来看看《商业的常识》这本书的介绍吧!

码农工具

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

核心属性

商业的常识

在线进制转换器

html转js在线工具

HEX CMYK 转换工具