CSS3 几步即可实现loading动画效果
来源:互联网 发布:f3飞控调参软件cf 编辑:程序博客网 时间:2024/04/23 23:03
例子1:菊花状的Loading效果
1.第一步画出静态的小菊花。
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定位,因此都重叠在了一起。
2.第二步将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度的示意图,其余圆点的旋转自行脑补:
3.三步通过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;}
这样每个点都在像信号灯一样同步地闪烁。
4.最后一步,给每个点设置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效果
例子2:ios版菊花Loading
明白了原理后,无非是在例子1的基础上,将圆点改成竖条,opacity半透明即可。
例子3:琴谱版Loading
1.第一步,画出静态琴谱,很简单无非是一个外层div,内嵌几个并排的div而已。
.spinner { height: 40px;}.spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block;}<div class="spinner"> <div></div> … //你可以根据需求多加几个div <div></div></div>
2.第二步,琴谱动起来
.spinner > div { …… animation: sk-stretchdelay 1.2s infinite ease-in-out;}@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); }}
例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸
3.最后一步,设置延时,让每个琴键在不同时间内拉伸。
.spinner .rect2 { animation-delay: -1.1s; }.spinner .rect3 { animation-delay: -1.0s; }.spinner .rect4 { animation-delay: -0.9s; }.spinner .rect5 { animation-delay: -0.8s; }<div class="spinner"> <div class="rect1"></div> … //为节省篇幅省略中间代码 <div class="rect5"></div></div>
每个琴键的拉伸间隔时间0.1s,因此第1个琴键没有animation-delay延时,立即拉伸。第二个琴键,从-1.1s开始闪烁。之后每个琴键均以0.1s递增的速度拉伸。和菊花Loading的原理是一样的,不赘述。
- CSS3 几步即可实现loading动画效果
- CSS3 几步即可实现loading动画效果
- CSS3实现loading(加载)动画效果
- CSS3 实现 Loading 动画
- css3实现loading动画
- css3动画实现loading
- 一步一步用CSS3实现简单的Loading动画效果
- 纯CSS3实现的8种Loading动画效果
- css3实现三种不同的loading加载动画效果
- 用CSS3 实现loading动画
- CSS3制作加载中loading动画效果
- css3 loading动画之打字效果
- 只用CSS3即可实现的动画,阴影效果的表单提示框
- css实现loading动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- Android 获取内外置存储卡方法
- 规划问题求解的理论---线性代数
- C++、delphi、python Quick_Sort实现
- 二叉树(三)
- 简单记录LaTex的入门经过
- CSS3 几步即可实现loading动画效果
- 设计模式
- 二叉树(四)
- 发现大量的TIME_WAIT解决办法
- Trie树和Ternary Search树的学习总结
- Linux信号介绍
- 高仿IOS的Android的弹出框
- Yaf php 栈与memorycache结合
- 如何在ubuntu16.0上安装qq