<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大风车案例</title>
<style>
*{
padding: 0;
margin: 50px;
}
.box{
position: relative;
}
ul li{
list-style: none;
}
.l1{
position:absolute;
top: 184px;
left: 9px;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background: #deb887;
transform: rotate(-15deg);
transform-origin: right top;
z-index: 1;
animation: s 0.8s infinite;
}
.l2{
position: absolute;
top: 181px;
left: 11px;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background: pink;
transform: rotate(75deg);
transform-origin:right top;
z-index: 1;
animation: s1 0.8s infinite;
}
.l3{
position: absolute;
top: 181px;
left: 11px;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background: #acfe31;
transform: rotate(165deg);
transform-origin: right top;
z-index: 1;
animation: s2 0.8s infinite;
}
.l4{
position: absolute;
top: 181px;
left: 11px;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background: #dca0dc;
transform: rotate(259deg);
transform-origin: right top;
z-index: 1;
animation: s3 0.8s infinite;
}
.ganzi{
position: absolute;
top: 180px;
left: 100px;
width: 20px;
height: 200px;
background: black;
}
@keyframes s{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes s1{
0%{
transform: rotate(90deg);
}
25%{
transform: rotate(180deg);
}
50%{
transform: rotate(270deg);
}
75%{
transform: rotate(360deg);
}
100%{
transform: rotate(450deg);
}
}
@keyframes s2{
0%{
transform: rotate(180deg);
}
25%{
transform: rotate(270deg);
}
50%{
transform: rotate(360deg);
}
75%{
transform: rotate(450deg);
}
100%{
transform: rotate(540deg);
}
}
@keyframes s3{
0%{
transform: rotate(270deg);
}
25%{
transform: rotate(360deg);
}
50%{
transform: rotate(450deg);
}
75%{
transform: rotate(540deg);
}
100%{
transform: rotate(630deg);
}
}
<×yle>
</head>
<body>
<div class="box">
<div class="fengche">
<ul>
<li class="l1"><P>
<li class="l2"><P>
<li class="l3"><P>
<li class="l4"><P>
</ul>
<div class="ganzi"></div>
</div>
</div>
</body>
<cml>
