console
<html>
<head>
<title>css</title>
</head>
<body>
<p class="cart">旋转的风车</p>
<div class="wrapper">
<div class="round">
<span>树木</span>
<span>天空</span>
<span>小溪</span>
<span>白云</span>
</div>
</div>
<div>
<p></p>
</div>
</body>
</html>
.cart{
text-align: center;
margin-top:60px;
color:greenyellow;
font-size: 20px;
}
.wrapper{
width:100px;
height:100px;
background:lightblue;
border-radius:50%;
border:2px solid lightgreen;
position: absolute;
top:230px;
left:430px;
cursor:pointer;
}
.wrapper:after{
content:'你猜';
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;
text-align:center;
color:#fff;
font-size:24px;
}
.round{
width:240px;
height:240px;
border:2px solid lightgreen;
border-radius:50%;
position: absolute;
top:-70px;
left:-70px;
transform:scale(0.9);
animation:rotating 5s linear infinite;
}
.round span{
width:40px;
height:40px;
line-height:40px;
display:inline-block;
border-radius:50%;
background:lightblue;
border:2px solid lightgreen;
color:#fff;
text-align:center;
position:absolute;
}
@keyframes rotating{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(180deg);
}
}
.round span:nth-child(1){
right:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(2){
left:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(3){
left:50%;
bottom:-22px;
margin-left:-22px;
}
.round span:nth-child(4){
left:50%;
top:-22px;
margin-left:-22px;
}