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

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

核心属性

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

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

查看所有标签

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

码农书籍

全景探秘游戏设计艺术

Jesse Schell / 吕阳、蒋韬、唐文 / 电子工业出版社 / 2010-6 / 69.00元

撬开你脑子里的那些困惑，让你重新认识游戏设计的真谛，人人都可以成为成功的游戏设计者!从更多的角度去审视你的游戏，从不完美的想法中跳脱出来，从枯燥的游戏设计理论中发现理论也可以这样好玩。本书主要内容包括：游戏的体验、构成游戏的元素、元素支撑的主题、游戏的改进、游戏机制、游戏中的角色、游戏设计团队、如何开发好的游戏、如何推销游戏、设计者的责任等。本书适合任何游戏设计平台的游戏设计从业人员或即将......一起来看看《全景探秘游戏设计艺术》这本书的介绍吧!

码农工具

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

核心属性

全景探秘游戏设计艺术

图片转BASE64编码

Base64 编码/解码

HSV CMYK 转换工具