当前位置：首页 > CSS

css制作太极阵

2026-02-13 06:27:22CSS

CSS 制作太极图

使用CSS创建一个太极图（阴阳图）可以通过伪元素、边框、圆角等属性实现。以下是实现方法：

HTML结构

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

CSS样式

.taiji {
  position: relative;
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, white 50%, black 50%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

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

.taiji::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  border: 35px solid white;
}

.taiji::after {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 35px solid black;
}

实现原理

基础圆形：通过border-radius: 50%创建一个圆形，使用线性渐变将圆分为黑白两半。
阴阳鱼眼：通过伪元素创建两个小圆，分别定位在上下半圆中心。上半圆的小圆为黑色带白色边框，下半圆的小圆为白色带黑色边框。
定位技巧：使用transform: translateX(-50%)确保伪元素水平居中，避免依赖父元素的宽度变化。

动画效果（可选）

为太极图添加旋转动画：

.taiji {
  animation: rotate 5s linear infinite;
}

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

响应式调整

通过CSS变量实现尺寸灵活调整：

css制作太极阵

.taiji {
  --size: 200px;
  width: var(--size);
  height: var(--size);
}

.taiji::before,
.taiji::after {
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
  border-width: calc(var(--size) / 5.7);
}

这种方法利用了CSS的现代特性，无需JavaScript即可实现经典的太极图案。通过调整CSS变量--size可以快速改变太极图的大小比例。