<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大风车案例</title>
<style type="textćs">
*{
padding: 0;
margin: 50px;
}
.box{
position: relative;
}
.leaf_box{
position: absolute;
margin: 10px auto;
width: 200px;
height: 200px;
position: relative;
transform: rotate(0deg);
transform-origin:78% 78%;
transition-duration: 200s;
}
.leaf_box:hover{
transform: rotate(72000deg);
}
.leaf{
display: inline-block;
width:45px;
height: 90px;
border-radius: 0 80px 80px 0 / 0 80px 80px 0 ;
}
.l1{
position: absolute;
top: 7px;
left: 80px;
background-color: #F4C589;
transform: rotate(200deg);
}
.l2{
position: absolute;
top: 55px;
left: 125px;
background-color: #FFD5DA;
transform: rotate(290deg);
}
.l3{
position: absolute;
top: 110px;
left: 80px;
background-color: #AFFC20;
transform: rotate(390deg);
}
.l4{
position: absolute;
top: 55px;
left: 32px;
background-color:#F2B3EF ;
transform: rotate(480deg);
}
.box .gan{
position: absolute;
width:10px;
height: 200px;
background:black;
top: 103px;
left: 314px;
/*opacity: 0.2;*/
z-index: 2;
}
<×yle>
</head>
<body>
<div class="box">
<div class="leaf_box">
<div class="l1 leaf"></div>
<div class="l2 leaf"></div>
<div class="l3 leaf"></div>
<div class="l4 leaf"></div>
</div>
<div class="gan"></div>
</div>
</body>
<cml>
