【需求描述】使用CSS实现风车效果（摘自网友）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS实现风车效果</title>
<style>
html{
height: 100%;
}
body{
height: 100%;
background:#a5cad6;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes rotate{
from{
transform:rotate(0deg)}to{
transform:rotate(359deg)}}
@keyframes rotate2{
from{
transform:rotate(0deg)}to{
transform:rotate(359deg)}}
.windmill {
display:block;
position: relative;
margin:50px auto;
width: 100px;
height: 120px;
}
.windmill .pillar{
position:absolute;
top:8px;
left:44px;
display: block;
height: 0;
width: 4px;
border-width: 0 4px 80px 4px;
border-style: none solid solid;
border-color: transparent transparent white;
}
.windmill .axis{
position:absolute;
top:0px;
left:46px;
width:4px;
height:4px;
border:3px #fff solid;
background:#a5cad6;
border-radius:5px;
z-index: 88;
animation: rotate 4s linear infinite;
}
.windmill .swing{
position:absolute;
top:1px;
left:-2px;
display: block;
height: 0;
width: 2px;
border-width: 50px 2px 0px 2px;
border-style: solid solid none;
border-color: white transparent transparent ;
box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);
transform-origin:0px 0px;
transform:rotate(60deg);
}
.windmill .swing2{
position:absolute;
top:0px;
left:4.5px;
display: block;
height: 0;
width: 2px;
border-width: 50px 2px 0px 2px;
border-style: solid solid none;
border-color: white transparent transparent ;
transform-origin:0px 0px;
transform:rotate(180deg);
}
.windmill .swing3{
position:absolute;
top:6px;
left:3px;
display: block;
height: 0;
width: 2px;
border-width: 50px 2px 0px 2px;
border-style: solid solid none;
border-color: white transparent transparent ;
transform-origin:0px 0px;
transform:rotate(300deg);
}
.windmill .axis:hover {
animation: rotate2 .3s linear infinite;
}
</style>
</head>
<body>
<span class="windmill">
<span class="pillar"></span>
<span class="axis">
<span class="swing"></span>
<span class="swing2"></span>
<span class="swing3"></span>
</span>
</span>
</body>
</html>