老规矩，先看最终效果，如果值得学习，记得帮忙点个赞哦！！！

实现思路

设置一个容器，用来显示图片内容，彩色环就是锥形渐变repeating-conic-gradient()实现的，详情看下方源码。

四张图片围绕同一个中心点旋转，给四张图片统一设置旋转中心，方便固定旋转位置，示意图。

旋转中心设置，方便设置旋转动画，动画生效后四张图片形成360度旋转，示意图

整体旋转示意图

准备素材

1. 一个div容器，包裹四张图片；

2. 四张图片；

3. 基础样式。

四张图片

基础样式

设置容器container样式

添加容器基本属性和伪类遮罩层效果样式。

设置每张图片基本样式

设置图片动画和延时

刷新浏览器，大功告成