css制作太极
使用CSS制作太极图案
通过CSS的border-radius、background和伪元素可以轻松实现太极图案。以下是一个完整的实现方法：
HTML结构只需一个div元素：
<div class="taiji"></div>CSS样式代码：
.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: 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;
}实现原理分解
-
基础圆形
通过设置width和height相同的值，配合border-radius: 50%创建正圆形。使用线性渐变将圆分为黑白两半。 -
阴阳鱼眼
使用::before和::after伪元素创建两个小圆，分别定位在上下半圆中心。
上眼为黑色带白边，下眼为白色带黑边，通过border属性实现边缘反色效果。
-
定位技巧
left: 25%确保小圆水平居中（50%宽度 + 25%偏移 = 圆心）。
绝对定位配合top:0和bottom:0分别固定上下位置。
动态旋转效果（可选）
添加CSS动画使太极旋转：
.taiji {
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式调整
通过vw单位实现自适应大小：
.taiji {
width: 20vw;
height: 20vw;
}最终效果将呈现经典的黑白太极图案，可通过调整尺寸参数适应不同场景需求。
