实现原理

CSS绘制太极图的核心原理：

• 使用圆形边框创建基本形状
• 利用线性渐变实现黑白两部分的分割
• 使用伪元素(::before和::after)创建阴阳鱼的眼
• 通过径向渐变实现阴阳鱼眼的黑白对比

核心代码

.code-crazy-taiji {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(90deg, white 50%, black 50%);
    position: relative;
    margin: 0 auto;
}

.code-crazy-taiji::before,
.code-crazy-taiji::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.code-crazy-taiji::before {
    top: 0;
    background: radial-gradient(circle at 50px 50px, black 25px, white 26px);
}

.code-crazy-taiji::after {
    bottom: 0;
    background: radial-gradient(circle at 50px 50px, white 25px, black 26px);
}

代码分析

让我们分析一下这段代码的工作原理：

• 基本形状：通过设置宽高相等并添加50%的border-radius，创建一个圆形
• 黑白分割：使用linear-gradient线性渐变，从左到右实现50%白色和50%黑色的分割
• 伪元素定位：使用::before和::after伪元素，分别定位在圆形的上半部分和下半部分
• 阴阳鱼眼：通过radial-gradient径向渐变，在伪元素中创建黑白对比的鱼眼效果
• 居中定位：使用left: 50%和transform: translateX(-50%)使伪元素水平居中

效果演示

使用场景

CSS太极图适用于以下场景：

• 中国传统文化主题网站
• 哲学或冥想相关内容
• 阴阳平衡概念的可视化
• 加载动画或过渡效果
• 品牌标识或图标设计

扩展与优化

你可以通过以下方式扩展和优化CSS太极图：

• 添加动画效果：使用CSS动画实现太极图的旋转效果
• 调整颜色：使用不同的颜色组合，如蓝色和红色，创造不同的视觉效果
• 响应式设计：使用相对单位(如vw)使太极图大小随屏幕尺寸变化
• 添加交互效果：鼠标悬停时改变旋转速度或颜色
• 多层嵌套：创建多个大小不同的太极图，形成层次感

浏览器兼容性

CSS太极图在现代浏览器中都能正常工作，包括：

• Chrome 4+
• Firefox 3.6+
• Safari 4+
• Edge 12+
• Opera 11.1+

对于IE9及以下版本，需要使用背景图片作为降级方案。

性能考量

CSS绘制太极图的性能优势：

• 零图片资源：完全通过CSS代码实现，减少HTTP请求
• 矢量图形：可以无限缩放而不失真
• 轻量级：代码量小，加载速度快
• 易维护：通过修改CSS变量即可快速调整样式