CSS3里怎么实现loading动画效果

来源：动视网责编：小采时间：2020-11-27 15:27:40

CSS3里怎么实现loading动画效果

CSS3里怎么实现loading动画效果:今天我们来教大家怎么用CSS3做出Loading的动画效果。为什么要用Loadning做出动画效果，我们给大家做一个实例，相信看了以后你一切的迷惑都会云消雾散。第一步画出静态的小菊花。sk-fading-circle { width: 40px; height: 40px; posit

推荐度：

点击下载本文 文档为doc格式

导读CSS3里怎么实现loading动画效果:今天我们来教大家怎么用CSS3做出Loading的动画效果。为什么要用Loadning做出动画效果，我们给大家做一个实例，相信看了以后你一切的迷惑都会云消雾散。第一步画出静态的小菊花。sk-fading-circle { width: 40px; height: 40px; posit

今天我们来教大家怎么用CSS3做出Loading的动画效果。为什么要用Loadning做出动画效果，我们给大家做一个实例，相信看了以后你一切的迷惑都会云消雾散。

第一步画出静态的小菊花。

sk-fading-circle {
 width: 40px;
 height: 40px;
 position: relative;
}
.sk-fading-circle .sk-circle {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
}
.sk-fading-circle .sk-circle:before {
 content: '';
 display: block;
 margin: 0 auto;
 width: 15%;
 height: 15%;
 background-color: #333;
 border-radius: 100%;
}
 
<div class="sk-fading-circle">
 <div class="sk-circle"></div>
 … //为缩减篇幅省略中间10个div
 <div class="sk-circle"></div>
</div>

代码如上，静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型，并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位，因此都重叠在了一起。

第二步将12个重叠的圆分散开。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
 <div class="sk-circle1 sk-circle"></div>
 … //为缩减篇幅省略中间10个div
 <div class="sk-circle12sk-circle"></div>
</div>

代码如上，用transform的rotate将各个圆点旋转，形成完整的菊花状。如果你对transform不熟的话，看下图，第二个圆点旋转30度的示意图，其余圆点的旋转自行脑补：

第三步通过animation控制opacity属性，让每个点淡进淡出

@-webkit-keyframes sk-circleFadeDelay {
 0%, 39%, 100% { opacity: 0; }
 40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
 0%, 39%, 100% { opacity: 0; }
 40% { opacity: 1; }
}
.sk-fading-circle .sk-circle:before {
 ……
 animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

这样每个点都在像信号灯一样同步地闪烁。

最后一步，给每个点设置animation-delay延时，以错开闪烁的时间，形成常见的菊花转转的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

因为是12个圆点，每个圆点的闪烁间隔时间0.1s，因此第1个圆点没有animation-delay延时，立即闪烁。第二个圆点，从-1.1s开始闪烁（负数不理解的话，参考animation一文，意思是从该时间点开始启动，之前的动画效果不显示）。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果

通过这个案列相信你已经完全掌握了怎样用Loadning做出动画效果，更多精彩请关注Gxl网其它相关文章！

CSS3里怎么实现loading动画效果

推荐度：

点击下载本文 文档为doc格式

标签：动画实现效果

热门焦点

CSS3里怎么实现loading动画效果

CSS3里怎么实现loading动画效果

CSS3里怎么实现loading动画效果

最新推荐

猜你喜欢

热门推荐