当前位置：首页 > CSS

css制作太极

2026-02-27 06:43:34CSS

使用CSS制作太极图案

通过CSS的border-radius、::before和::after伪元素，可以绘制一个经典的太极符号。以下是实现步骤和代码示例：

css制作太极

HTML结构

css制作太极

<div class="taiji"></div>

CSS样式

.taiji {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, white 50%, black 50%);
  border-radius: 50%;
  position: relative;
  animation: rotate 5s linear infinite;
}

.taiji::before, .taiji::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

.taiji::before {
  top: 0;
  left: 25%;
  background: black;
  border: 20px solid white;
}

.taiji::after {
  bottom: 0;
  left: 25%;
  background: white;
  border: 20px solid black;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

关键实现原理

基础圆形：通过border-radius: 50%将div转化为圆形，并用线性渐变分割黑白两色。
阴阳鱼眼：使用伪元素创建两个半圆，分别定位在上下半部，通过边框颜色形成对比。
旋转动画：通过transform: rotate实现太极图的动态旋转效果。

自定义调整建议

修改.taiji的width和height可调整整体尺寸。
调整伪元素的border宽度可改变鱼眼大小。
修改animation属性中的时间参数控制旋转速度。

静态版本简化代码

若不需要动画效果，可移除animation和@keyframes部分：

.taiji {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, white 50%, black 50%);
  border-radius: 50%;
  position: relative;
}