使用css画个太极圈

效果图

html

 <div className="circle-box">
   <div className="circle">
     <div className="white" />
     <div className="black" />
   </div>
 </div>

less

.circle-box {
        // transform: rotateX(102deg);
        position: absolute;
        top: 0;
        left: 0;

        .circle {
            width: 500px;
            height: 500px;
            border-radius: 50%;
            animation: Rotate 5s linear infinite;
            transform-origin: center center center;
            overflow: hidden;
            position: relative;

            &::after {
                content: "";
                display: block;
                height: 250px;
                background-color: #fff;
            }

            &::before {
                content: "";
                display: block;
                height: 250px;
                background-color: #000;
            }

            >div {
                position: absolute;
                width: 250px;
                height: 250px;
                border-radius: 50%;
                top: 125px;
            }

            .white {
                left: 0;
                background-color: #fff;

                &::after {
                    position: absolute;
                    top: 100px;
                    left: 100px;
                    content: "";
                    display: block;
                    height: 50px;
                    width: 50px;
                    border-radius: 50%;
                    background-color: #000;
                }
            }

            .black {
                right: 0;
                background-color: #000;

                &::after {
                    position: absolute;
                    top: 100px;
                    left: 100px;
                    content: "";
                    display: block;
                    height: 50px;
                    width: 50px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }
        }
    }