效果图
实现思路
1.首先通过HTML+CSS实现加载动画的静态效果;
2.根据需求给每个动画设计不同的动画效果。
例如第一个加载图标的静态绘制
1、首先确定动画的盒子宽高;
2、设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转。);
3、通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位。
4、由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中长方形个数)。
.circle-line{
width: 100px;
h