声明：本文并非原创
实现的效果如下：
我之所以将其拿出来分享，一方面觉得它看起来比较酷，也像原作者所说的那样：看起来是个令人生畏的病毒，另一方面觉得作者的编码思路和代码值得了解学习下。
步骤一：制作八卦图
第一步是使用 CSS 创建阴阳八卦图，如下：
上面仅使用一个 div 元素，配合 ::before 和 ::after 创建伪元素完成。看下面的代码，你应该就懂了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>yinyang</title> <style> body { background-color: #eee; } .yinyang { position: relative; background-color: #fff; height: 100px; width: 100px; border-radius: 50%; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); } .yinyang::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fff; border: 18px solid #000; border-radius: 50%; width: 14px; height: 14px; } .yinyang::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #000; border: 18px solid #fff; border-radius: 50%; width: 14px; height: 14px; } </style> </head> <body> <div class="yinyang"></div> </body> </html> 复制代码
你可以运行上面的代码进行验证
步骤二：整合八卦图
我们需要一个外部的元素 div 对我们生成的两个八卦图进行管理。其实我们相当于又制作了一个大的八卦图，如下：
这里制作的方法跟步骤一的方法大同小异，这里就不进行赘述了。
步骤三：添加动画
下面我们让图动起来。为八卦图添加 animation 动画。
@keyframes roll { from { transform: rotate(0deg); // 从零度开始 } to { transform: rotate(-360deg); // 旋转一周 } } 复制代码
当然，我们需要它循环旋转，要在 .yinyang 类中操作：
.yinyang { animation: roll 4s linear infinite; // 4秒中完成一次匀速动画，并循环播放 } 复制代码
完结
我们来整合下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>yinyang</title> <style> body { background-color: #eee; } .circle { margin-top: 3rem; box-sizing: border-box; height: 200px; width: 200px; border-radius: 50%; padding-left: 50px; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); animation: roll 10s linear infinite; /* 反向旋转 */ animation-direction: reverse; } .yinyang { position: relative; background-color: #fff; height: 100px; width: 100px; border-radius: 50%; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); /* 4秒中完成一次匀速动画，并循环播放 */ animation: roll 4s linear infinite; } .yinyang::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fff; border: 18px solid #000; border-radius: 50%; width: 14px; height: 14px; } .yinyang::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #000; border: 18px solid #fff; border-radius: 50%; width: 14px; height: 14px; } @keyframes roll { from { /* 从零度开始 */ transform: rotate(0deg); } to { /* 旋转一周 */ transform: rotate(-360deg); } } </style> </head> <body> <div class="circle"> <div class="yinyang"></div> <div class="yinyang"></div> </div> </body> </html> 复制代码
至此，整个案例的实现已经完成✅。
