前言
继上次实现一个大白兔的效果后，这次我就带大家来实现一个旋转风车的效果，纯CSS实现，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
HTML部分
首先看到HTML部分。相关代码如下。
<figure>
<span class="two part1"></span>
<span class="two part2"></span>
<span class="two part3"></span>
<span class="two part4"></span>
<span class="zero copy-1"></span>
<span class="zero copy-2"></span>
<span class="text happy">happy</span>
<span class="text windmill">windmill</span>
<span class="text pinwheel">pinwheel</span>
</figure>
这里创建了一个 HTML 结构，用于创建一个包含多个 <span> 元素的 <figure> 容器。这些 <span> 元素构建一个风车图形。结合类名和结构，配合 happy 等文本，用于构建场景。part1-part4 是风车的四个叶片，zero 是中心轴，通过 CSS 动画实现旋转效果。最终实现了一个风车的基本模块。
CSS部分
接下来我们看到CSS部分，相关代码如下。首先是基础样式。
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkred; /* 深红色背景 */
}
这里主要的作用就是让页面居中显示，背景为深红色。
然后是网格布局。
figure {
font-size: 60px; /* 基准大小 */
display: grid;
grid-template-columns: repeat(8, 1em); /* 8列 */
grid-template-rows: repeat(3, 1em); /* 3行 */
color: whitesmoke; /* 主色调 */
}
这里定义一个 8列 × 3行 的网格，每个单元格 1em（基于 font-size: 60px），主颜色为 whitesmoke（灰白色）。
接着是四个部分拼合。
.two {
background-color: currentColor; /* 继承父级颜色 */
filter: drop-shadow(4em 0 0 whitesmoke); /* 右侧投影（镜像效果） */
}
.two.part1 { grid-area: 1/1; border-radius: 100% 0 0 0; } /* 左上圆角 */
.two.part2 { grid-area: 2/2; border-radius: 0 0 100% 0; } /* 右下圆角 */
.two.part3 { grid-area: 3/1; border-radius: 100% 0 0 0; } /* 左上圆角 */
.two.part4 { grid-area: 3/2; border-radius: 0 0 0 100%; } /* 左下圆角 */
为 "2" 的每个部分添加右侧投影，形成镜像效果（类似 "2 2"）。将四个部分定位到网格的特定位置，拼合成数字 "2"。最后通过圆角控制形状，模拟手写风格。
.zero {
width: 0;
height: 0;
border: 1em solid;
border-color: currentColor transparent; /* 上下有色，左右透明 */
border-radius: 50%; /* 圆形 */
transform: rotate(-45deg); /* 初始旋转 */
animation: round 4s linear infinite; /* 旋转动画 */
}
.zero.copy-1 { grid-area: 2/3/4/5; } /* 第一个 "0" */
.zero.copy-2 { grid-area: 2/7/4/9; } /* 第二个 "0" */
通过 border 和 border-radius 创建一个环形（只显示上下两段弧线）。
设计一个动画round让 "0" 持续旋转，相关代码如下。
@keyframes round {
to { transform: rotate(-45deg + -1turn); } /* 逆时针旋转360° */
}
这里用于实现元素的连续逆时针旋转效果。元素从 -45deg 开始，逆时针完整旋转 360 度，最终回到 -45deg。由于动画是 infinite（无限循环），视觉效果为持续逆时针旋转。
最后是装饰文本。
.text {
font-size: 0.66em;
text-transform: uppercase; /* 大写字母 */
font-family: cursive; /* 手写字体 */
font-weight: bold;
mix-blend-mode: difference; /* 混合模式（反色效果） */
}
.text.happy { grid-area: 1/2; } /* 位置：第1行第2列 */
.text.windmill { grid-area: 2/4; } /* 位置：第2行第4列 */
.text.pinwheel { grid-area: 1/6; } /* 位置：第1行第6列 */
mix-blend-mode: difference混合模式会计算文本颜色（whitesmoke）和背景色（darkred）的差值，产生动态反色效果，在深红背景上，whitesmoke 文字会显示为浅青色（#f5f5f5 与 #8b0000 的差值），增强视觉对比，营造霓虹灯或发光文字的感觉。
所以最终效果就是文字"happy"、"windmill"、"pinwheel" 作为装饰，动画方面风车持续逆时针旋转，营造动态感。配色方面，主色 whitesmoke 与深红背景形成对比，文字通过 mix-blend-mode 反色。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，如果需要调整，可以修改 font-size、动画速度或颜色来适配不同场景，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
