如何使用html代码写一个旋转的八卦图？
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
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%;
}
</style>
</head>
<body>
<p class="box">
<p class="son1">
<p class="test"></p>
</p>
<p class="son2">
<p class="test2"></p>
</p>
</p>
</body>
</html>
