<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
#box {
width:420px;
height:420px;
/*background-color:gray;*/
margin:0 Auto;
position:relative;
}
#small {
/*width:30px;
height:30px;*/
/*border:1px solid #000;
/*width:200px;*/
box-shadow:10px 10px 20px #222;
height:0;
border-top-width:210px;
Border-top-color:black;
border-bottom-width:210px;
Border-bottom-color:white;
border-left-width:0;
border-right-width:0;
Border-style:solid;
border-radius:210px;
position:relative;
top:40px;
}
#small: before{
Content: "";
height:70px;
width:70px;
border:70px solid black;
border-radius:140px;
Background-color:white;
Border-style:solid;
Position:absolute;
Top: -100px;
}
#small: after{
Content: "";
height:70px;
width:70px;
border:70px solid white;
border-radius:140px;
Background-color:black;
Border-style:solid;
Position:absolute;
Top: -100px;
right:0px;
}
#small {
Animation:quanquan 15s linear infinite;
}
@keyframes quanquan{
0%{
Transform:rotate (0DEG);
}
100%{
Transform:rotate ( -360DEG);
}
}
</style>
<body>
<div id= "box" >
<div id= "small" class= "box" >
</div>
</div>
</body>
Mobile Phone QQ Sweep plus web front-end Learning Tribe 22 Group , group file sharing, technical Exchange
Massive front End Learning library, add group 120342833
Super-powerful rotation of Taiji source