css制作太极阵
CSS 制作太极图
通过CSS的伪元素、边框和背景属性，可以绘制一个经典的太极图案。以下是实现方法：
HTML结构
<div class="taiji"></div>CSS样式
.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: 20px solid white;
}
.taiji::after {
bottom: 0;
left: 25%;
background: white;
border: 20px solid black;
}实现原理
-
创建圆形容器
通过border-radius: 50%将div变为圆形，使用线性渐变将背景分为黑白两半。 -
添加阴阳鱼眼
利用伪元素::before和::after创建两个半圆，分别定位在上下两部分。
上部分为黑圆配白边框，下部分为白圆配黑边框，形成阴阳相济的效果。
-
调整比例
通过调整伪元素的尺寸（50%）和定位（25%偏移），确保鱼眼位于正确位置。
边框宽度建议为容器宽度的10%（示例中20px对应200px容器）。
动态效果扩展
如需添加旋转动画，可增加以下CSS：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.taiji {
animation: spin 5s linear infinite;
}响应式调整
通过CSS变量实现尺寸自适应：
.taiji {
--size: 15vw;
width: var(--size);
height: var(--size);
}
.taiji::before, .taiji::after {
border-width: calc(var(--size) * 0.1);
}
