复制代码代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>flower</title>
<style type="text/css">body,html,div,span,p,ul,li{margin:0;padding:0;}
body{ background:#000;}
#flower{width:300px; position:absolute; top:50%;left:50%; margin:-115px 0 0 -150px; height:330px;}
#leaf { position:relative; z-index:2;}
#leaf h3{ width:75px; height:75px; display:block; border:1px solid #FB96C2; box-shadow:0 0 1px #FB96C2; /* background:red;*/ background:-webkit-linear-gradient(top, #fff ,#FFAFD6 30%, #F493C0 70%,#DB5E86 100%); border-radius:75px 0 75px 0; -webkit-transform:rotate(90deg); position:absolute; transition:all 0.5s; }
#leaf h3:first-child{-webkit-transform:rotate(130deg);}
#leaf h3:nth-child(2){-webkit-transform:rotate(120deg); left:-12px; top:7px;}
#leaf h3:nth-child(3){-webkit-transform:rotate(143deg); left:12px; top:7px;}
#leaf h3:nth-child(4){-webkit-transform:rotate(150deg); left:12px; top:7px;}
#leaf h3:nth-child(5){-webkit-transform:rotate(120deg); left:-12px; top:7px;}
#leaf h3:nth-child(6){-webkit-transform:rotate(160deg); left:26px; top:11px;}
#leaf h3:nth-child(7){-webkit-transform:rotate(105deg); left:-26px; top:11px;}
/*#leaf h3:nth-child(4){-webkit-transform:rotate(110deg); left:-18px; top:12px;}
#leaf h3:nth-child(5){-webkit-transform:rotate(170deg); left:18px; top:12px;}
#leaf h3:nth-child(6){-webkit-transform:rotate(185deg); left:38px; top:27px;}
#leaf h3:nth-child(7){-webkit-transform:rotate(85deg); left:-38px; top:27px;}*/
#three{ position:relative; margin-top:-10px;}
#three div{width:8px; height:200px; background:#390; margin:100px 0 0 37px; border-radius:10px; position:absolute; z-index:1; border-radius:200px 0 0 0;}
#three h3{width:6px; height:6px; border-radius:6px; background:#3B7B6D; display:inline-block; position:absolute; left:34px; top:115px;}
#three h3:nth-child(2){top:150px;left:45px;}
#three h3:nth-child(3){top:185px}
#three h3:nth-child(4){top:220px;left:45px;}
#three h3:nth-child(5){top:255px}</style>
</head>
<body>
<div id="flower">
<div id="leaf">
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
</div>
<div id="three">
<div></div>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
</div>
</div>
<script type="text/javascript" src="https://cdn.studyweb.cn/imgupload/007294/jquery.min.js"></script>
<script type="text/javascript">$(function(){
setTimeout(function(){
$("#leaf h3:eq(6)").css({left:-38px,top:27px,transform:rotate(85deg)})
$("#leaf h3:eq(5)").css({left:38px,top:27px,transform:rotate(185deg)})
$("#leaf h3:eq(4)").css({left:-18px,top:12px,transform:rotate(110deg)})
$("#leaf h3:eq(3)").css({left:18px,top:12px,transform:rotate(170deg)})
},1000)
setTimeout(function(){
$("#leaf h3:eq(6)").css({top:48px,left:-38px,transform:rotate(80deg)})
$("#leaf h3:eq(5)").css({left:45,top:48px,transform:rotate(190deg)})
$("#leaf h3:eq(4)").css({left:-42px,top:28px,transform:rotate(95deg)})
$("#leaf h3:eq(3)").css({left:42px,top:28px,transform:rotate(165deg)})
},2000)
setTimeout(function(){
$("#leaf h3:eq(6)").css({top:300px,left:10px})
},3000)
setTimeout(function(){
$("#leaf h3:eq(5)").css({top:270px,left:100px})
},3100)
setTimeout(function(){
$("#leaf h3:eq(4)").css({top:210px,left:"-70px"})
},3200)
setTimeout(function(){
$("#leaf h3:eq(3)").css({top:160px,left:"50px"})
},3300)
})</script>
</body>
</html>
