css3圆环旋转效果动画怎么做

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

①.  Sweep  表示圆的完整程度，以百分比表示（如上所示）。 ②.  Start  控制柄表示扇形的开始位置。手柄的起始位置设置为0，但你可以围绕圆圈拖动它以更改环的位置。 ③. 圆圈中心的  Ratio  手柄允许你将圆圈更改为圆环，比例越大，圆环越小。 ④. 圆角Corner Radius：环形两端的圆角大小，默认是0，输入圆环的可以调整为圆角端头。画个正圆，改个颜色，快捷键O，再按Shift鼠标悬停在上面，上下拖动Arc，可以扫出一个扇形 鼠标点击中间的手柄 Radio，让外拖拽，可以看到成环形 鼠标点击手柄sweep，拖拽至和另一端start重合 圆环制作完成cmd+D 复制一份，改个颜色 鼠标悬停，点击手柄sweep往上拖拽，出现缺口 鼠标点击手柄start，更改圆环的开始位置右上角，圆角的大小为圆的半径即可画一个400X400的圆，关掉填充，描边stroke设置为64px关键点：描边设置为居中描边Cmd+D 原地复制一层，改个颜色 重复方法一的 *** 作，鼠标拖拽出想要的角度和占比； 鼠标点击start手柄拖动，可以修改它开始的位置。相关文档： https://figmachina.com/guide/vectors-and-shapes/using-the-arc-tool.html

---