用HTML + CSS实现太极图

一、效果图

二、实现思路

三、完整代码

四、总结

一、效果图

如图所示，太极图一半为黑色（代表阴），另一半为白色（代表阳）。这两部分相互环绕，形成一种流动的、旋转的感觉。

二、实现思路

1. 首先绘制出一个圆形，使用 线性渐变 linear-gradient来创建黑白两色的分界线。

2. 设置两个子元素用来替代太极图中的两个鱼眼。并放在合适的位置，为方便观看这里加上了边框。

3. 给鱼眼设置 径向渐变 -webkit-radial-gradient来实现从中心开始的颜色过渡。

4. 定义动画的关键帧，实现太极图从0度到360度的自动旋转，并去掉鱼眼边框。

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div class="box"><div class="one"></div><div class="two"></div></div></div>
</body><style>*{margin: 0;padding: 0;}.container{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background: gray;}.box{width: 500px;height: 500px;background-color: #000;border: 1px solid #fff;border-radius: 50%;background: linear-gradient(to right,black 50%,white 50%);position: relative;animation: rota 2s linear infinite;}.box:hover{animation-play-state: paused;}.one{width: 250px;height: 250px;border-radius: 50%;background: -webkit-radial-gradient(center,white 20%,black 20%);position: absolute;top: 0;left: 125px;}.two{width: 250px;height: 250px;border-radius: 50%;background: -webkit-radial-gradient(center,black 20%,white 20%);position: absolute;bottom: 0;left: 125px;}@keyframes rota {0%{transform: rotate(0);}100%{transform: rotate(360deg);}}
</style>
</html>