CSS：实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转_css图片按照椭圆旋转

需求描述

需要类似图示的动态效果：
底部有两圈椭圆圆环，外侧圆环顺时针旋转，内侧圆环逆时针旋转，且外侧圆环上有一个圆点沿轨迹顺时针运动；中部有五个层叠圆盘，默认情况下它们静止且层叠，当满足一定条件时开始动画，将所有圆盘逆时针旋转并将除了最底层外的圆盘依序上下浮动。

实现思路

①将需求分解为4个div并一一实现效果：外侧圆环、内侧圆环、外侧轨迹圆点、层叠圆盘；
②外侧圆环、内侧圆环：实现思路相同，首先参考CSS圆锥渐变实现色彩渐变的正圆圆环，接下来使用CSS-transform进行变换：压缩圆环div的高度实现椭圆效果（变换div高度：transform-scaleY），然后添加旋转动画效果（变换div倾斜角度：transform-rotate）；
③外侧轨迹圆点：实现沿椭圆轨迹运动的圆点动效比较复杂，本文的实现方式主要参考了CSS椭圆轨迹旋转-参考链接1，此外翻到的CSS椭圆轨迹旋转-参考链接2这篇虽然在实现当前需求时没有用到，但感觉可以作为一种实现方式的补充（而且写得很用心吖~码一下☆▽☆）；
④层叠圆盘：实现思路与椭圆圆环基本一致，圆盘浮动效果只需增加一个改变圆盘纵向位置的动效，此外还需要在容纳所有圆盘的div上设置一个动效类（pie-spin）用于控制圆盘是否动画

代码

HTML

<div class="animate-icon">
  <!-- 外侧圆环div -->
  <div class="flat circle-outer">
    <!-- 笔者在同一个div中既压缩圆环又旋转圆环时出了问题，
            因此将压缩的样式提取为flat类套在上一层 -->
    <div class="content"></div>
  </div>
  
  <!-- 内侧圆环div -->
  <div class="flat circle-inner">
    <div class="content"></div>
  </div>
  
  <!-- 外侧轨迹圆点 -->
  <div class="circle-ball"></div>
  
  <!-- 层叠圆盘，当这个div有pie-spin类时进行动画 -->
  <div class="flat circle-pie pie-spin">
    <div class="content pie0"></div>
    <div class="content pie1"></div>
    <div class="content pie2"></div>
    <div class="content pie3"></div>
    <div class="content pie4"></div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

CSS

.animate-icon {
  width: 200px;
  height: 200px;
  background: #2A2A2A;
}

/* 压缩div高度，将正圆变为椭圆 */
.flat {
  transform: scaleY(0.375);
}

.circle-outer {
  position: relative;
  left: 20px;
  top: 70px;
}

.circle-outer .content {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  /* 圆锥渐变 */
  background: conic-gradient(fuchsia, pink, orange, gold, snow);
  /* 将圆中心“掏空”变成圆环 */
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin 4s linear infinite;
}

.circle-inner {
  position: relative;
  left: 40px;
  top: -72px;
}

.circle-inner .content {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: conic-gradient(blue 40%, teal 72%, cyan 88%, blue);
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin-r 4s linear infinite;
}

.circle-ball {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: snow;
  animation:
    animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
    animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    spin-ball 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}

.circle-pie {
  position: absolute;
  top: 200px;
  left: 58px;
}

.circle-pie .content {
  position: absolute;
  opacity: 0.6;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: radial-gradient(seagreen 30%, limegreen 80%, lime);
}

.pie-spin .content {
  background: conic-gradient(lime 10%, mediumseagreen 30%, forestgreen 80%, lime);
}

.pie0 {
  top: -188px;
}

/* 设置圆盘逆时针旋转，不透明度动态变化
  （圆盘们浮动在下方叠起时变得更透明，否则变不透明） */
.pie-spin .pie0 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite;
}

.pie1 {
  top: -240px;
}

/* 非最底层的圆盘需设置上下浮动动画 */
.pie-spin .pie1 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani1 4s infinite;
}

.pie2 {
  top: -293px;
}

.pie-spin .pie2 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani2 4s infinite;
}

.pie3 {
  top: -345px;
}

.pie-spin .pie3 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani3 4s infinite;
}

.pie4 {
  top: -397px;
}

.pie-spin .pie4 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani4 4s infinite;
}

/* 顺时针旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(360deg); }
}

/* 逆时针旋转动画 */
@keyframes spin-r {
  0% { transform: rotate(360deg); }
  100% {  transform: rotate(0deg); }
}

/* 圆点横向运动变化，需根据真实效果调整参数 */
@keyframes animX{
  0% { left: 24px; }
  100% { left: 178px; }
}

/* 圆点纵向运动变化，需根据真实效果调整参数 */
@keyframes animY{
  0% {top: 122px;}
  100% {top: 182px;}
}

/* 圆点尺寸运动变化，实现转动时近大远小的效果 */
@keyframes spin-ball {
  0% { transform: scale(0.64); }
  50% { transform: scale(1); }
  100% { transform: scale(0.64); }
}

/* 圆盘不透明度变化效果 */
@keyframes pie-opa {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* 圆盘浮动效果：由于圆盘大小相同、层叠的距离也相同，
  非最底层的圆盘样式可以动态生成以减少重复代码 */
@keyframes pie-ani1 {
  0% { top: -198px; }
  30% { top: -240px; }  
  70% { top: -240px; }
  100% { top: -198px; }
}

@keyframes pie-ani2 {
  0% { top: -208px; }
  30% { top: -293px; }
  70% { top: -293px; }
  100% { top: -208px; }
}

@keyframes pie-ani3 {
  0% { top: -218px; }
  30% { top: -345px; }
  70% { top: -345px; }
  100% { top: -218px; }
}

@keyframes pie-ani4 {
  0% { top: -228px; }
  30% { top: -397px; }
  70% { top: -397px; }
  100% { top: -228px; }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203

可以拷贝到这里在线调试：

菜鸟工具–HTML/CSS/JS在线工具

参考文档

[1] CSS圆锥渐变
[2] CSS-transform
[3] transform-scaleY
[4] transform-rotate
[5] CSS椭圆轨迹旋转-参考链接1
[6] CSS椭圆轨迹旋转-参考链接2
[7] CSS颜色代码大全