今天我们来教大家怎么用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%;} … //为缩减篇幅省略中间10个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);} … //为缩减篇幅省略中间10个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做出动画效果，更多精彩请关注创想鸟其它相关文章！
相关阅读：
怎样用canvas实现小球和鼠标的互动
怎样用canvas做出粒子喷泉动画的效果
css3点击显示涟漪特效
以上就是CSS3里怎么实现loading动画效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545288.html
微信扫一扫 
支付宝扫一扫 
