相信大家对一些网页、应用程序的过渡/加载动画并不陌生，那他时怎么做出来的呢？实际上，实现起来并不难。只需要跟着下面的步骤，编程小白也可以做出动画效果。
Demo代码
HTML
当然，也可以戳链接进行购买，超值价学习编程~
超实用性的Python零基础入门到进阶视频源码淘宝￥2购买已下架CSS
原理说明：
步骤1
使用span标签，设置
宽度、高度均为96px相对定位
步骤2
利用span::before和span::after充当白色、红色方框
设置为
绝对定位（left:0;top:0;）宽度、高度均为96px边框：6pxsolidwhite;
最终呈现结果：
步骤3
修改span::after背景色为红色
最终呈现结果：
PS：span::before和after位置发生了重叠，图中其实红色与白色方块位于同一位置，只是after后面设置，最后显示为红色了
步骤4
为span::after、span::before添加动画
顺时针旋转4s无限循环速度曲线：ease-in-out
最终呈现结果：
步骤5
步骤4动画效果是为span::before和span::after同时添加的
我们需要将二者显示效果分开
对span::after动画开始时间进行延时，分离span::before和span::after
最终呈现结果：