CSS3写一个风车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes animate1 {
from {
transform: rotate(-360deg);
}
}
#div0{
width: 200px;
height: 500px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#container {
width: 200px;
height: 200px;
animation: animate1 2s infinite linear;
}
#container:hover {
/*animation-play-state:paused;*/
animation: animate1 .1s infinite linear;
}
#container div {
width: 0;
height: 0;
float: left;
}
#div1 {
border: 50px solid lightblue;
border-color: #FFB02D #FFB02D #3AA37A transparent;
}
#div2 {
border: 50px solid lightcoral;
border-color: transparent #A0BD77 #A0BD77 #5687E7;
}
#div3 {
border: 50px solid lightgreen;
border-color: #5697FE #C1533F transparent #5697FE;
}
#div4 {
border: 50px solid lightseagreen;
border-color: #EE7A65 transparent #FFCD35 #FFCD35;
}
#stick{
width: 10px;
height: 250px;
background: #666666;
margin-top: -50px;
margin-left: 95px;
}
</style>
</head>
<body>
<div id="div0">
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="stick"></div>
</div>
</body>
</html>
效果图：
