用CSS纯代码绘制旋转的太极图，核心是利用CSS的盒模型、伪元素、边框圆角以及动画属性，不需要依赖任何图片或者JavaScript代码，下面我们一步步实现这个效果。
一、太极图的基础结构分析
标准太极图是一个圆形，内部由黑白两部分组成，各包含一个相反颜色的小圆点，整体呈现阴阳交替的效果。我们可以先绘制最外层的圆形容器，再逐步添加内部元素。
二、绘制基础太极图
1. 外层容器样式
首先定义太极图的容器，设置宽高相等形成正方形，再通过border-radius设置为50%变成圆形，同时用左右边框区分黑白两部分。
/* 太极图容器基础样式 */
.taiji {
width: 200px;
height: 200px;
border-radius: 50%;
/* 左右边框区分黑白，左边黑右边白 */
border-left: 100px solid #000;
border-right: 100px solid #fff;
/* 相对定位，方便内部伪元素定位 */
position: relative;
/* 去掉默认边距 */
margin: 0;
padding: 0;
box-sizing: border-box;
}2. 添加内部黑白小圆点
使用::before和::after伪元素分别绘制上下两个半圆和内部的小圆点，通过绝对定位调整位置，结合border和border-radius实现圆形效果。
/* 上半部分黑色半圆和白色小圆点 */
.taiji::before {
content: '';
position: absolute;
top: 0;
left: -50px; /* 因为容器左边有100px黑色边框，伪元素宽度100px，所以左移50px居中 */
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
border: 18px solid #fff; /* 白色边框形成内部白色小圆点效果 */
box-sizing: border-box;
}
/* 下半部分白色半圆和黑色小圆点 */
.taiji::after {
content: '';
position: absolute;
bottom: 0;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
border: 18px solid #000; /* 黑色边框形成内部黑色小圆点效果 */
box-sizing: border-box;
}3. HTML结构
只需要一个div元素即可，不需要额外嵌套标签。
<div class="taiji"></div>
三、添加旋转动画
使用@keyframes定义旋转动画，再通过animation属性绑定到太极图容器上，实现持续旋转的效果。
/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 给太极图添加动画 */
.taiji {
/* 之前的样式保留，新增动画属性 */
animation: rotate 3s linear infinite;
}四、完整代码整合
把上面的样式和HTML组合起来，就是完整的可运行代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS旋转太极图</title>
<style>
.taiji {
width: 200px;
height: 200px;
border-radius: 50%;
border-left: 100px solid #000;
border-right: 100px solid #fff;
position: relative;
margin: 50px auto;
animation: rotate 3s linear infinite;
box-sizing: border-box;
}
.taiji::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
border: 18px solid #fff;
box-sizing: border-box;
}
.taiji::after {
content: '';
position: absolute;
bottom: 0;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
border: 18px solid #000;
box-sizing: border-box;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>五、实现原理说明
整个实现过程没有使用任何图片，核心思路是：
- 用容器的左右边框实现太极图左右黑白两半的基础区分
- 用
::before和::after伪元素绘制上下两个半圆，通过背景色和边框组合出内部的小圆点 - 用
border-radius:50%把所有元素都处理成圆形，保证图形规整 - 用
transform:rotate()配合@keyframes实现旋转动画，linear保证旋转速度均匀，infinite让动画无限循环
如果需要调整太极图的大小，只需要修改容器的宽高，同时按比例调整边框宽度、伪元素的宽高和定位值即可，动画的时长可以通过修改animation里的3s参数调整，数值越小旋转速度越快。