html怎么以一条边旋转,如何使用html代码写一个旋转八卦图？

如何使用html代码写一个旋转的八卦图？

html,body{

height:100%;

}

*{

padding:0;

margin:0;

}

body{

background:cyan;

}

.box{

height:400px;

width:400px;

background:linear-gradient(to left,white 50%,black 50%);

border-radius:50%;

animation:bg 4s linear infinite;

}

@keyframes bg{

from{

transform:rotateZ(0deg);

}

to{

transform:rotateZ(360deg);

}

}

.son1,.son2{

height:200px;

width:200px;

margin:0 auto;

border-radius:50%;

overflow:hidden;

}

.son1{

background:black;

}

.son2{

background:white;

}

.test,.test2{

height:100px;

width:100px;

background:radial-gradient(at 30px 30px,#878b8d,#b1b4b5);

margin:50px auto;

border-radius:50%;

}