简单的CSS3 Loading动画
发布时间：2020-12-14 23:52:53 所属栏目：资源 来源：网络整理
导读：最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。 ? 首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色
|
最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。
? 首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下：
85%
? 布局使用了伪元素，很容易看懂就不解释了，整个动画过程分为4步：
第2步：此时B静止不动，A开始旋转到180度，在视觉上看起来就像是B继续在旋转； 第3步：此时整个圆都出现在用户视野，就如图二的样子，要使loading动画循环播放，此时应该让B继续旋转到360度，A静止不动； 第4步：第3步执行完之后，B消失在用户视野并静止不动，A继续旋转到360度即回到原点完成一个回合。 用示意图表示如下：
为了便于计算，假设一个回合的时间为4s，每一步用时1s钟，每一步占整个动画的25%，总结起来就是： 0%—25%：B旋转到180deg 25%—50%：B静止，A旋转到180deg 50%—75%：A静止，B继续旋转到360deg回到原点 75%—100%：B静止，A继续旋转到360deg回到原点结束一个回合 用关键帧表示如下：
{:;}{:;}{:;}{:;}{:;}
重点就是这个关键帧，最后，附上整个demo
85%
?5月11日更新： 附上一个用到这个知识点做的时钟，demo： |
