HTML+CSS绘制黑白双鱼太极图，通过border-radius、伪元素定位及渐变
是使用HTML实现太极效果的详细方法,涵盖多种技术方案及具体实现步骤：
SVG结合CSS与JavaScript（矢量绘图+动态交互）
- 创建SVG容器：在HTML中添加
<svg>标签作为画布，例如<svg width="200" height="200"></svg>，SVG基于XML语法，适合绘制精确的几何图形。 - 绘制基础形状
- 外圆轮廓：用
<circle cx="中心X坐标" cy="中心Y坐标" r="半径" fill="颜色"/>定义主圆形。 - 阴阳分割线：通过
<path>元素的弧形路径实现黑白分界，代码<path d="M100,0 A100,100 0 1,0 100,200 A100,100 0 1,0 100,0 Z" fill="white"/>可创建白色半圆覆盖在黑色背景上。 - 小圆点装饰：添加两个小圆圈表示“阴中有阳、阳中有阴”，如
<circle cx="100" cy="50" r="25" fill="black"/>和对应的白色反向圆点。
- 外圆轮廓：用
- 样式优化：利用CSS设置SVG的尺寸自适应（如
width: 200px; height: auto;）、居中显示（margin: 0 auto; display: block;），并添加阴影效果增强立体感。 - 动态效果：使用JavaScript控制旋转动画，通过
setInterval定时修改CSS的transform属性实现平滑旋转；还可结合缩放变换创造脉冲效果。
纯CSS伪元素实现（无需脚本）
- HTML结构简化：仅需单个
<div class="taiji">作为容器。 - 关键CSS技巧
- 基础圆形：将容器设置为宽高相等且边框半径50%（
border-radius: 50%），形成完美正圆。 - 渐变背景：采用线性渐变模拟阴阳分割，如
background: linear-gradient(white 50%, black 50%)实现上下黑白均分。 - 伪元素构造细节：利用
::before和::after生成两个小圆，分别用径向渐变填充颜色。.box::before { content: ""; width: 100px; height: 100px; background: radial-gradient(white 25%, black 30%); border-radius: 50%; }。
- 基础圆形：将容器设置为宽高相等且边框半径50%（
- 动画控制：定义关键帧动画
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }，并通过:hover伪类触发播放状态切换，实现鼠标悬停时旋转的效果。
Canvas绘图（适合复杂定制）
- 初始化画布：在HTML中插入
<canvas id="myCanvas"></canvas>，并在JS中获取上下文对象（getContext('2d')）。 - 路径绘制逻辑
- 先画出完整的大圆作为底色层；
- 覆盖绘制相反颜色的半圆形成阴阳交错效果；
- 逐步添加小鱼形图案和小圆点完成细节。
- 动态扩展性：可通过JS监听用户事件（如点击、拖拽），实时重绘不同形态的太极变体。
方案对比表
| 特性 | SVG方案 | CSS伪元素方案 | Canvas方案 |
|---|---|---|---|
| 实现难度 | 中等（需熟悉路径语法） | 简单（仅CSS） | 复杂（需编程逻辑） |
| 性能表现 | 优（硬件加速渲染） | 良 | 依赖优化程度 |
| 交互能力 | 强（JS完全控制） | 有限（仅CSS动画） | 极强（可响应各种事件） |
| 适用场景 | 高精度矢量图形、多端适配 | 快速实现静态/基础动画 | 复杂动态效果、游戏集成 |
示例代码片段（CSS方案完整版）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">太极图</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.taiji {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(white 50%, black 50%);
animation: rotate 2s linear infinite paused;
}
.taiji::before,
.taiji::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.taiji::before {
background: radial-gradient(circle at center, white 25%, black 30%);
}
.taiji::after {
background: radial-gradient(circle at center, black 25%, white 30%);
}
.taiji:hover {
animation-play-state: running;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>
FAQs
Q1：如何让太极图持续自动旋转？
A：在CSS中为容器添加无限循环动画，例如animation: rotate 2s linear infinite;（去掉paused状态），若需暂停交互，可配合:hover调整播放状态。
Q2：能否用HTML直接绘制而无需其他技术？
A：纯HTML无法实现曲线和复杂图形，必须结合CSS或SVG，最简方案是使用单色块拼接，但效果粗糙；推荐采用上述任意一种
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/80012.html
