We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
声明：本文并非原创
实现的效果如下：
我之所以将其拿出来分享，一方面觉得它看起来比较酷，也像原作者所说的那样：看起来是个令人生畏的病毒，另一方面觉得作者的编码思路和代码值得了解学习下。
看起来是个令人生畏的病毒
第一步是使用 CSS 创建阴阳八卦图，如下：
上面仅使用一个 div 元素，配合 ::before 和 ::after 创建伪元素完成。看下面的代码，你应该就懂了：
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 动画。
animation
@keyframes roll { from { transform: rotate(0deg); // 从零度开始 } to { transform: rotate(-360deg); // 旋转一周 } }
当然，我们需要它循环旋转，要在 .yinyang 类中操作：
.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>
至此，整个案例的实现已经完成✅。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
实现的效果如下：
我之所以将其拿出来分享，一方面觉得它看起来比较酷，也像原作者所说的那样：
看起来是个令人生畏的病毒，另一方面觉得作者的编码思路和代码值得了解学习下。步骤一：制作八卦图
第一步是使用 CSS 创建阴阳八卦图，如下：
上面仅使用一个
div元素，配合::before和::after创建伪元素完成。看下面的代码，你应该就懂了：步骤二：整合八卦图
我们需要一个外部的元素
div对我们生成的两个八卦图进行管理。其实我们相当于又制作了一个大的八卦图，如下：这里制作的方法跟步骤一的方法大同小异，这里就不进行赘述了。
步骤三：添加动画
下面我们让图动起来。为八卦图添加
animation动画。当然，我们需要它循环旋转，要在
.yinyang类中操作：完结
我们来整合下代码：
至此，整个案例的实现已经完成✅。
后话
The text was updated successfully, but these errors were encountered: