如何使用CSS实现变色旋转动画的动态效果

效果预览

代码解读

定义 dom，容器中包含 9 个元素：

<div class="container">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

居中显示：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: black;
}

定义容器尺寸：

.container {
 width: 30em;
 height: 30em;
 font-size: 12px;
}

设置容器中线条的样式：

.container {
 color: lime;
}

.container span {
 position: absolute;
 width: 5em;
 height: 5em;
 border-style: solid;
 border-width: 1em 1em 0 0;
 border-color: currentColor transparent;
 border-radius: 50%;
}

让线条在容器中居中显示：

.container {
 display: flex;
 align-items: center;
 justify-content: center;
}

定义变量，使线条从中心向外侧逐渐延伸：

.container span {
 --diameter: calc(5em + (var(--n) - 1) * 3em);
 width: var(--diameter);
 height: var(--diameter);
}

.container span:nth-child(1) {
 --n: 1;
}

.container span:nth-child(2) {
 --n: 2;
}

.container span:nth-child(3) {
 --n: 3;
}

.container span:nth-child(4) {
 --n: 4;
}

.container span:nth-child(5) {
 --n: 5;
}

.container span:nth-child(6) {
 --n: 6;
}

.container span:nth-child(7) {
 --n: 7;
}

.container span:nth-child(8) {
 --n: 8;
}

.container span:nth-child(9) {
 --n: 9;
}

设置让线条旋转的动画效果：

.container span {
 animation: rotating linear infinite;
 animation-duration: calc(5s / (9 - var(--n) + 1));
}

@keyframes rotating {
 to {
 transform: rotate(1turn);
 }
}

定义改变颜色的动画效果，以色相环一周 360 度为 100%，--percent 变量是指位于这个 100% 的哪个位置：

@keyframes change-color {
 0%, 100% {
 --percent: 0;
 }

 10% {
 --percent: 10;
 }

 20% {
 --percent: 20;
 }

 30% {
 --percent: 30;
 }

 40% {
 --percent: 40;
 }

 50% {
 --percent: 50;
 }

 60% {
 --percent: 60;
 }

 70% {
 --percent: 70;
 }

 80% {
 --percent: 80;
 }

 90% {
 --percent: 90;
 }
}

最后，把改变颜色的动画效果应用到容器上：

.container {
 --deg: calc(var(--percent) / 100 * 360deg);
 color: hsl(var(--deg), 100%, 50%);
 animation: change-color 5s linear infinite;
}

大功告成！

相关文章推荐：

如何用CSS和D3实现宇宙飞船的动态效果

如何使用CSS和D3实现无尽六边形空间的效果