css制作太极

2026-01-28 03:45:02CSS

使用CSS制作太极图案

通过CSS的border-radius和伪元素可以轻松实现太极图案。以下是一个完整的实现方法：

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

.taiji {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, white 50%, black 50%);
  position: relative;
  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;
}

实现原理解析

太极图案由两个半圆组成阴阳鱼，通过CSS的渐变背景实现基础分割。伪元素创建两个小圆点，分别位于上下半圆中心。

border-radius: 50%将div转化为圆形，linear-gradient创建黑白各占一半的背景。伪元素通过绝对定位精确定位，使用边框创建鱼眼效果。

动画效果增强

添加旋转动画使太极动起来：

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

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

响应式调整

通过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实现，无需图片，支持高清显示和动态效果。调整尺寸变量即可适应各种使用场景。