使用css做一个旋转的八卦图
1, html部分
<div class="tai"><div class="bai"></div><div class="hei"></div>
</div>
2, css部分
.tai{width: 200px;height: 200px;border: 1px solid #000;background: linear-gradient(#fff 50%, #000 50%); // 使用渐变添加背景颜色border-radius: 50%;display: flex;align-items: center;.bai{height: 50%;width: 50%;background: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;}// 白色部分黑色小圆点.bai::after{content: '';width: 30px;height: 30px;background: #000;border-radius: 50%;}.hei{height: 50%;width: 50%;background: #000;border-radius: 50%;display: flex;justify-content: center;align-items: center;}黑色部分白色小圆点.hei::after{content: '';width: 30px;height: 30px;background: #fff;border-radius: 50%;}// 加个动画旋转起来animation: rotate 2s linear infinite;}@keyframes rotate {from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
)
)
