欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。

定义 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;}