正文
CSS 画一个八卦
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
效果图：
实现原理：
设置高度为宽度的2倍的一个框，利用 border 补全另一半的宽度，设置圆角
用两个 div 设置不同的颜色，定位到圆的上下指定位置。
最后只剩下里面的小圆圈了。设个宽高，圆角即可。
CSS
body{
height: 100%;
margin: 0 auto;
}
.bg_box{
width: 100px;
height: 200px;
margin: 200px auto;
background-color: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 2px 100px;
border-radius: 100%;
position: relative;
animation: xuanzhuan 4s linear infinite;
}
.top-circle{
position:absolute;
left:-50px;
top:;
height:100px;
width:100px;
text-align:center;
line-height:100px;
border-radius:100%;
background:#000;
}
.bottom-circle{
position:absolute;
left:-50%;
bottom:;
height:100px;
width:100px;
text-align:center;
line-height:100px;
border-radius:100%;
background:#fff;
}
.small-circle{
display:inline-block;
height:25px;
width:25px;
border-radius:100%;
}
.white{
background:#fff;
}
.black{
background:#000;
}
@keyframes xuanzhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
HTML
<div class="bg_box">
<div class="top-circle">
<span class="small-circle white"></span>
</div>
<div class="bottom-circle">
<span class="small-circle black"></span>
</div>
</div>
