一、初始设置
首先，在HTML文件里定义两个主要元素代表阴阳两极，比如div，并分别赋予它们特定类名如".yin" 和 ".yang"：
html
<div class="taiji">
<div class="circle yin"></div>
<div class="circle yang"></div>
</div>
二、基础样式设定
为这两个部分添加基本圆形形状及位置属性:
css
.taiji {
position: relative;
width: 200px; /* 根据需求调整大小 */
}
.circle {
border-radius: 50%;
position: absolute;
height: inherit;
width: inherit;
}
.yin { background-color: #ccc;}
.yang{ background-color: black;}
三、绘制静态太极图
接下来让黑白两圆相互嵌套且对半分布：
css
.yin{
clip-path:polygon(10% 0%,90% 0%,50% 100%);
z-index:-1;
}
.yang {
left: 48%; /* 让黑色区域覆盖到白色区域内一部分形成过渡效果*/
}
四、制作旋转动画
为了使这个太极图形动起来，我们需要用到`@keyframes`规则编写自定义动画并应用transform中的rotate函数使其持续转动：
css
/* 定义名为spin的关键帧动画 */
@keyframes spin {
to { transform: rotate(360deg); } /* 设置转满一圈的状态 */
}
.circle {
animation-name: spin; /* 使用刚才定义好的动画名称 */
animation-duration: 2s; /* 动画时长设为2秒 */
animation-iteration-count: infinite; /* 循环播放无限次 */
}
经过以上步骤后，我们已经成功地构建了一个会自动旋转的太极图案。
五、进阶：增加流动感
为了让太极流转更具动感，可以给每个圈内部再加入小一号颜色相反的同心圆，同时让他们以不同的速度进行反向旋转：
css
.yin:before,
.yang:before {
content:'';
display:block;
position:absolute;
top:7px; bottom:7px;left:7px;right:7px;
border-radius:inherit;
background:#fff;/* 颜色取对方的颜色 */;
animation-direction: reverse; /* 反方向旋转 */
animation-duration: 3s; /* 调整不同时间长度创造错落有致的感觉 */
}
// 对于'.yang'的小白圈做类似处理但更改背景颜色及相关尺寸定位即可。
至此，我们就完成了一幅具有丰富视觉表现力和高度还原度的动态太极图案设计。通过对CSS3核心特性的灵活掌握与创新实践，即使是看似复杂的运动形态也能轻松编码呈现出来。
标签： css3怎么画太极
