hello，这是我的第一个CSS小作品
其中有很多标签都没有见过，所以特地花了一下午时间去研究了一下，比如flex模型和使用，选择器的使用以及div的排版，收获很多，下面就是我的代码了，希望能动手练一练，自己写和看一看真的不一样！
还有一篇讲的非常不错的，关于flex模型的内容推荐给大家
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
border: 0px;
box-sizing: border-box;/**改变和模型*/
}
body{
background-color: #ddd
}
@keyframes x{ /*keyframes关键针*/
from{
transform: rotate(0deg); /*开始*/
}
to{
transform: rotate(360deg); /*结束*/
}
}
#big{
height: 100vh; /*vh视野的可视范围*/
align-items: center;
justify-content: center;
flex-direction: column;
display: flex;
}
#wrapper{
width: 500px;
height: 500px;
margin:0 auto;
display: flex;
border-radius: 50%;
position: relative;
overflow: hidden;/*清除他以外的内容*/
animation: x 10s infinite linear; /*x动画 10s转一次 永久转 线性的*/
}
#black{
flex:1;
height: 500px;
background-color: black;
box-shadow: 3px 3px 3px 3px rgba(255,255,255,.2)
}
#white{
flex:1;
height: 500px;
background-color: white;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,.2)
}
#wrapper> div:nth-child(3){
width: 250px;
height: 250px;
border-radius: 50%;
background-color: black;
position: absolute;
left:25%;
top:0px;
}
#wrapper> div:nth-child(4){
width: 250px;
height: 250px;
border-radius: 50%;
background-color: white;
position: absolute;
left:25%;
bottom: 0px;
}
#wrapper >div:nth-child(5){
width: 62.5px;
height: 62.5px;
border-radius: 50%;
background-color: black;
position: absolute;
left:50%; /*让小圆的中间到父亲的中间的方法*/
margin-left: -31.25px; /*让小圆的中间到父亲的中间的方法*/
bottom: 25%;
margin-bottom: -31.25px;
}
#wrapper >div:nth-child(6){
width: 62.5px;
height: 62.5px;
border-radius: 50%;
background-color: white;
position: absolute;
left:50%;
margin-left: -31.25px;
top: 25%;
margin-top: -31.25px;
}
p{
font-size: 2em;
}
#introduce{
margin-top: 1em;
}
</style>
</head>
<body>
<div id="big">
<div id="wrapper">
<div id="black"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="introduce"><p>旋转的八卦图</p></div>
</div>
</body>
</html>
