css制作太极阵

2026-01-28 12:08:33CSS

使用CSS绘制太极图案

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

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

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

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

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

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

添加旋转动画效果

为太极图案添加旋转动画可以增强视觉效果：

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

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

响应式调整

通过CSS变量使太极图案尺寸可灵活调整：

:root {
  --taiji-size: 200px;
}

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

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

使用SVG替代方案

对于更精确的控制，可以使用SVG实现：

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="100" fill="url(#gradient)"/>
  <circle cx="100" cy="50" r="30" fill="black"/>
  <circle cx="100" cy="150" r="30" fill="white"/>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="50%" stop-color="white"/>
      <stop offset="50%" stop-color="black"/>
    </linearGradient>
  </defs>
</svg>