前言
这次带大家来实现一个由 HTML 和 CSS 组合而成的效果，太极阴阳鱼。话不多说，我们直奔主题。
效果预览
接下来教大家如何使用 CSS 创建一个阴阳鱼的旋转动画，使用了变量、线性渐变和伪元素。
CSS 部分
首先我们看到.yin-yang类样式，相关代码如下。
.yin-yang {
width: 10em;
height: 10em;
font-size: 20px;
--color1: white;
--color2: black;
background-image: linear-gradient(var(--color1) 50%, var(--color2) 50%);
display: flex;
align-items: center;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
animation: rotating linear 5s infinite;
}
@keyframes rotating {
to {
transform: rotate(1turn);
}
}
这里我们创建了一个阴阳鱼样式的旋转动画效果。在.yin-yang中，width: 10em; height: 10em;设置了阴阳鱼容器的宽度和高度为 10 个字体尺寸。font-size: 20px;设置了字体大小为 20px。--color1: white; --color2: black;：自定义了两个颜色变量，用于表示阴阳鱼的两种部分颜色。background-image: linear-gradient(var(--color1) 50%, var(--color2) 50%);创建了一个线性渐变背景，将容器一分为二，并使用两种颜色填充。display: flex; align-items: center;表示采用弹性布局，在容器中垂直居中放置鱼形图案。box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);则是给阴阳鱼容器添加了一个淡淡的阴影效果。
animation: rotating linear 5s infinite;则是应用了一个名为 rotating 的线性动画，使阴阳鱼进行无限旋转效果。该动画的作用是使阴阳鱼旋转 1 个完整的圈，使阴阳鱼进行无限旋转。
接着是伪元素的样式，相关代码如下。
.yin-yang::before,
.yin-yang::after {
content: "";
width: 50%;
height: 50%;
background-color: var(--inner-color);
box-sizing: border-box;
border: 1.5em solid var(--outer-color);
}
.yin-yang::before {
--inner-color: var(--color1);
--outer-color: var(--color2);
}
.yin-yang::after {
--inner-color: var(--color2);
--outer-color: var(--color1);
}
这里使用了伪元素:before和:after来创建阴阳鱼中的两个部分，并使用自定义变量来控制它们的颜色。
在.yin-yang::before 和 .yin-yang::after中，content: ""设置了伪元素的内容为空，这样它们就可以在页面中生成。width: 50%; height: 50%;定义了伪元素的宽度和高度，使其成为容器的一半大小。background-color: var(--inner-color);使用了var(--inner-color)来设置伪元素的背景颜色，这样通过外部的自定义变量来控制内部的颜色。box-sizing: border-box;设置了box-sizing为border-box，确保了边框的大小不会改变元素的尺寸。border: 1.5em solid var(--outer-color);则是创建了一个边框，通过var(--outer-color)使用自定义变量设置了边框的颜色。
在.yin-yang::before 和 .yin-yang::after 中的--inner-color 和 --outer-color定义了两种不同的内外颜色组合作为自定义变量，以此来调出阴阳鱼两个部分的颜色。
通过使用自定义变量以及::before 和 ::after 伪元素被用来创建鱼形图案的两个部分，实现了通过 CSS 生成阴阳鱼中的两个部分，并结合颜色变量来灵活控制它们的样式和颜色。
到这里整个效果的实现就结束了，比较简单。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
