前言
这次带大家来用纯CSS实现一个动画环。整个效果比较简单并且实现起来也很容易，话不多说，我们直接进入主题。
效果预览
效果如下所示。
HTML部分
首先我们看到HTML部分，相关代码如下。
<figure class="container">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</figure>
这里定义了一个 figure 容器，其中包含了十个 div 元素，每个 div 元素内部又包含了一个 span 元素。figure 元素带有 container 类，用于表示这个元素是一个容器。
CSS部分
接着我们看到CSS部分，相关代码如下。
.container {
width: 17em;
height: 17em;
font-size: 16px;
position: relative;
}
.container div {
position: absolute;
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(calc(var(--n) * 40deg));
}
这里描述了一个容器（.container）及其内部元素的样式设置。在.container中，设置容器的宽度和高度为 17em，设置字体大小为 16px，并且将容器设置为相对定位，以便让内部的绝对定位元素相对于容器进行定位。
在.container div中，将 div 元素设置为绝对定位，以便下级元素进行定位，将子级 div 元素继承了父级容器的宽度和高度，子级元素使用 Flex 布局，内容居中显示，对子级元素进行旋转操作，角度根据自定义属性 --n 的值计算得出。
在.container div span中，将 span 元素设置为绝对定位，以便进行自由定位，并且设置 span 元素的宽度和高度为 1em。然后根据自定义属性 --n 的值计算得出 hsl 颜色，并且设置 span 元素最初的水平位置。这里为 span 元素应用两个动画，move 和 morph，并设置了动画的延迟时间。
综合起来，这些样式设置创造了一个旋转的图案，span 元素根据自定义属性的值计算得到不同的颜色，并且应用了两个动画效果。
接着看到该动画效果的编写，相关代码如下。
@keyframes move {
50% {
left: calc(90% - 0.5em);
}
}
@keyframes morph {
0%,
100% {
transform: scale(0.75, 1);
}
50% {
transform: scale(1.5, 0.5);
}
}
这里定义了两个关键帧动画：move和morph。让我们逐个来看看。
@keyframes move这个关键帧动画定义了元素在动画过程中移动的效果。50% 关键帧设定了元素在水平方向上向右移动，通过left属性实现。元素会在动画的中间位置，也就是50% 的时间点，从初始位置向右移动到距离容器右边10% 距离的位置。
@keyframes morph这个关键帧动画定义了元素在动画过程中形状变化的效果。通过transform属性中的scale函数实现元素在动画中逐渐变换尺寸。0% 和100% 关键帧将元素水平和垂直方向上的缩放比例分别设置为0.75和1，使得元素缩小并恢复到原始尺寸。50% 关键帧将元素水平和垂直方向上的缩放比例分别设置为1.5和0.5，使得元素呈现出了不对称的形状。
综合起来，这些关键帧动画描述了元素的运动路径和形状变化效果，在CSS动画中达到了扭曲和移动的视觉效果。
接着看到barrel的相关样式，相关代码如下。
.pencil .barrel {
width: 40em;
background-color: var(--color-middle);
border-top: 1em solid var(--color-top);
border-bottom: 1em solid var(--color-bottom);
color: silver;
line-height: 1.5em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
}
这里描述了铅笔（.pencil）元素中笔身部分（.barrel）的样式设置。这里设置了笔身部分（barrel）的宽度为 40em。使用自定义变量 --color-middle 来设置笔身的背景颜色，并且设置文本颜色为银色。设置行高为1.5em以及字母之间的间距为0.1em，以提高文本的可读性。综合起来，这里定义了铅笔笔身部分的形状、颜色和文本样式，以及文字的排列方式。
最后就是通过码使用:nth-child伪类为具有类名.container的元素下的子元素设置了自定义属性 --n的值。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
