css制作太极阵

使用CSS绘制太极图

HTML结构

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

CSS样式实现

.taiji {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(90deg, 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 {
  background: white;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 25px solid black;
}

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

动画效果增强

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

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

实现原理

1. 创建圆形容器通过border-radius: 50%
2. 使用渐变背景分割黑白区域
3. 伪元素创建阴阳鱼眼
4. 通过边框颜色实现鱼眼反色效果
5. 添加旋转动画模拟传统太极动态

参数调整建议

• 修改width和height可调整整体大小
• 调整伪元素的border宽度可改变鱼眼大小
• 修改animation-duration控制旋转速度
• 更改box-shadow参数实现不同投影效果