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:0;
            height:100px;
            width:100px;
            text-align:center;
            line-height:100px;
            border-radius:100%;
            background:#000;
        }
        .bottom-circle{
            position:absolute;
            left:-50%;
            bottom:0;
            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>