该阴阳图通过HTML与CSS实现，以div容器包裹两个半圆（黑白各半）及中心小圆（阴阳鱼眼），利用border-radius绘制圆形，position定位元素，形成经典阴阳鱼造型，黑白对比鲜明，通过transform实现旋转动画，象征阴阳平衡与动态转化，代码简洁，兼容性强，可直接嵌入网页作为文化装饰元素，兼具视觉美感与哲学寓意。
如何用HTML和CSS绘制传统阴阳图
阴阳图,又称太极图，是中华传统文化的经典符号，象征着阴阳对立统一、循环往生的哲学思想，它以简洁的黑白两色、流畅的曲线勾勒出宇宙万物的动态平衡，在前端开发中，我们可以用纯HTML和CSS轻松绘制出这一传统图形，既能展示技术能力，又能传递文化内涵，本文将详细介绍如何通过HTML结构和CSS样式实现阴阳图的绘制，并加入动态效果让图形更生动。
阴阳图的构成与设计思路
传统阴阳图由三个核心部分组成：
- 外圆：整体轮廓，代表宇宙的完整性；
- 阴阳鱼：一大一小两个对称的"S"形区域，黑白各半，象征阴阳对立与互根；
- 鱼眼：阴阳鱼内部各有一个小圆，阴中有阳（白鱼眼），阳中有阴（黑鱼眼），寓意"阴中有阳，阳中有阴"。
实现思路：
- 用HTML构建基础结构（容器、阴阳鱼、鱼眼）；
- 用CSS的
border-radius、position、transform等属性绘制圆形和曲线； - 通过绝对定位调整各元素位置,确保对称与比例；
- 添加CSS动画,让阴阳图缓慢旋转，强化"循环"的意境。
HTML结构搭建
我们需要一个容器来包裹整个阴阳图,内部包含阴阳鱼主体和鱼眼元素，HTML结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">阴阳图HTML实现</title>
<style>
/* 样式将在下一部分添加 */
</style>
</head>
<body>
<div class="taiji-container">
<!-- 阴阳鱼主体 -->
<div class="fish">
<!-- 阴鱼（黑色部分） -->
<div class="fish-yin"></div>
<!-- 阳鱼（白色部分） -->
<div class="fish-yang"></div>
</div>
<!-- 阴鱼眼（白色小圆） -->
<div class="fish-eye-yin"></div>
<!-- 阳鱼眼（黑色小圆） -->
<div class="fish-eye-yang"></div>
</div>
</body>
</html>
结构说明：
.taiji-container：最外层容器，用于居中图形并控制整体大小；.fish：阴阳鱼的父容器，包含.fish-yin（阴鱼）和.fish-yang（阳鱼）；.fish-eye-yin和.fish-eye-yang：分别对应阴鱼中的白眼和阳鱼中的黑眼。
CSS样式实现细节
容器与基础样式
首先设置容器居中、固定宽高，并隐藏默认的body边距：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* 浅灰背景，突出阴阳图 */
}
.taiji-container {
width: 300px; /* 容器宽度，可调整大小 */
height: 300px; /* 容器高度 */
position: relative; /* 为内部绝对定位元素提供参考 */
}
绘制阴阳鱼主体
阴阳鱼的核心是两个"S"形区域，我们可以通过两个半圆旋转拼接实现，具体步骤：
- 阴鱼（黑色）：用一个半圆（
border-radius: 50% 50% 0 0）向下旋转，形成左侧黑色区域； - 阳鱼（白色）：用一个半圆（
border-radius: 0 0 50% 50%）向上旋转，形成右侧白色区域； - 两个半圆通过绝对定位重叠,组合成"S"形。
.fish {
width: 100%;
height: 100%;
position: relative;
overflow: hidden; /* 隐藏超出容器部分 */
}
.fish-yin, .fish-yang {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.fish-yin {
left: 0;
background-color: #000; /* 黑色阴鱼 */
border-radius: 100% 0 0 100%; /* 左半圆 */
transform: rotate(45deg); /* 旋转45度，形成S形曲线 */
transform-origin: right center; /* 以右侧中心为旋转轴 */
}
.fish-yang {
right: 0;
background-color: #fff; /* 白色阳鱼 */
border-radius: 0 100% 100% 0; /* 右半圆 */
transform: rotate(-45deg); /* 反向旋转45度 */
transform-origin: left center; /* 以左侧中心为旋转轴 */
}
添加鱼眼
鱼眼是两个小圆,分别位于阴鱼和阳鱼的"头部"位置，通过绝对定位精确定位：
.fish-eye-yin, .fish-eye-yang {
width: 20%; /* 鱼眼大小，约为容器直径的1/5 */
height: 20%;
border-radius: 50%; /* 圆形 */
position: absolute;
top: 10%; /* 垂直位置，靠近顶部 */
}
.fish-eye-yin {
left: 65%; /* 水平位置，在阳鱼区域内 */
background-color: #fff; /* 白色鱼眼（阴中有阳） */
}
.fish-eye-yang {
right: 65%; /* 水平位置，在阴鱼区域内 */
background-color: #000; /* 黑色鱼眼（阳中有阴） */
}
添加旋转动画
为了让阴阳图体现"循环"的动态感，我们可以用CSS动画让整个容器缓慢旋转：
.taiji-container {
animation: rotate 10s linear infinite; /* 10秒一圈，无限循环 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
完整CSS代码
将上述样式整合,完整CSS如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.taiji-container {
width: 300px;
height: 300px;
position: relative;
animation: rotate 10s linear infinite;
}
.fish {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.fish-yin, .fish-yang {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.fish-yin {
left: 0;
background-color: #000;
border-radius: 100% 0 0 100%;
transform: rotate(45deg);
transform-origin: right center;
}
.fish-yang {
right: 0;
background-color: #fff;
border-radius: 0 100% 100% 0;
transform: rotate(-45deg);
transform-origin: left center;
}
.fish-eye-yin, .fish-eye-yang {
width: 20%;
height: 20%;
border-radius: 50%;
position: absolute;
top: 10%;
}
.fish-eye-yin {
left: 65%;
background-color: #fff;
}
.fish-eye-yang {
right: 65%;
background-color: #000;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
进阶优化
响应式设计
为了使阴阳图在不同设备上都能良好显示,我们可以添加响应式设计：
/* 媒体查询，适配不同屏幕尺寸 */
