首页 / CSS3 / CSS3里怎么实现loading动画效果

CSS3里怎么实现loading动画效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3里怎么实现loading动画效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2592字，纯文字阅读大概需要4分钟。

内容图文

今天我们来教大家怎么用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网其它相关文章！

相关阅读：

怎样用canvas实现小球和鼠标的互动

怎样用canvas做出粒子喷泉动画的效果

css3点击显示涟漪特效

以上就是CSS3里怎么实现loading动画效果的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3里怎么实现loading动画效果全部内容，希望文章能够帮你解决CSS3里怎么实现loading动画效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/392181.html

来源：【匿名】