CSS 旋转太极图

<style>
    body{
        background:lightblue;
    }
    div{
        width: 200px;
        height: 200px;
        background:linear-gradient(white 50%,black 50%);
        margin:200px auto;
        display: flex;
        align-items: center;
        border-radius: 50%;
        transition:all 2s;
        transform: rotateZ(0deg);
        animation: fox_run 2s linear infinite;
        /* transform-origin: left top; */
        /*
        rotate 中心 ==== rotateZ
           正值 顺时针
           负值 逆时针
         */

        /* transform: rotateY(0deg); */
    }
    @keyframes fox_run {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

    /* 鼠标放上去顺时针旋转60°*/
    div:hover{
        /*transform: rotate(60deg);*/

        /* 鼠标放上去暂停或者开始 */
        animation-play-state: paused;
        /*animation-play-state: running;*/
    }

    div::before{
        content:"";
        /*display: block;*/
        width:100px;
        height: 100px;
        background:radial-gradient(white 25%,black 30%);
        border-radius: 50%;
    }
    div::after{
        content:"";
        /*display: block;*/
        width:100px;
        height: 100px;
        background:radial-gradient(black 25%,white 30%);
        border-radius: 50%;
    }
</style>