css制作太极
使用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;
}
.taiji::before,
.taiji::after {
content: '';
position: absolute;
width: 50%;
height: 50%;
border-radius: 50%;
}
.taiji::before {
top: 0;
left: 25%;
background: black;
border: 25px solid white;
}
.taiji::after {
bottom: 0;
left: 25%;
background: white;
border: 25px solid black;
}添加动画效果
让太极图旋转起来可以增加视觉效果：
.taiji {
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式调整
通过CSS变量可以方便地调整太极图大小：
.taiji {
--size: 200px;
width: var(--size);
height: var(--size);
}
.taiji::before,
.taiji::after {
border-width: calc(var(--size) / 8);
}进阶样式
添加阴影和渐变效果增强立体感：
.taiji {
box-shadow: 0 0 20px rgba(0,0,0,0.3);
background: linear-gradient(45deg, #f9f9f9 50%, #333 50%);
}这些CSS技巧组合起来可以创建出美观且符合传统太极图案的设计，通过调整参数还能实现不同风格的变体。
