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>