。。。中华有神功

HTML

CSS

table{    width: 4rem;    height: 4rem;    border: 0.02rem solid black;    border-radius: 50%;        animation: rotate 10s infinite linear;}@keyframes rotate{    0%{        transform: rotate(0deg);    }    100%{        transform: rotate(-360deg);    }}table .tr1{    background: black;}table .tr1 .td1{    border-top-left-radius: 100%;    position: relative;}table .tr1 .td1 .div1{    width: 100%;    height: 100%;    border-radius: 50%;    background: black;    position: absolute;    top: 50%;    display: flex;    justify-content: center;    align-items: center;}table .tr1 .td1 .div1 p{    width: 60%;    height: 60%;    border-radius: 50%;    background: white;}table .tr1 .td2{    border-top-right-radius: 100%;    position: relative;}table .tr1 .td2 .div2{    width: 100%;    height: 100%;    border-radius: 50%;    background: white;    position: absolute;    top: 50%;    display: flex;    justify-content: center;    align-items: center;}table .tr1 .td2 .div2 p{    width: 60%;    height: 60%;    border-radius: 50%;    background: black;}table .tr2 .td3{    border-bottom-left-radius: 100%;}table .tr2 .td4{    border-bottom-right-radius: 100%;}

太极八卦，阴阳五行  ——  不停转