css3+jq 编写的含苞待放的荷花

来源：互联网发布：软件推广公司好做吗编辑：程序博客网时间：2024/04/29 08:08

<!doctype html><html><head><meta charset="utf-8" /><title>flower</title>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 strong{ 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 strong:first-child{-webkit-transform:rotate(130deg);}#leaf strong:nth-child(2){-webkit-transform:rotate(120deg); left:-12px; top:7px;}#leaf strong:nth-child(3){-webkit-transform:rotate(143deg); left:12px; top:7px;}#leaf strong:nth-child(4){-webkit-transform:rotate(150deg); left:12px; top:7px;}#leaf strong:nth-child(5){-webkit-transform:rotate(120deg); left:-12px; top:7px;}#leaf strong:nth-child(6){-webkit-transform:rotate(160deg); left:26px; top:11px;}#leaf strong:nth-child(7){-webkit-transform:rotate(105deg); left:-26px; top:11px;}/*#leaf strong:nth-child(4){-webkit-transform:rotate(110deg); left:-18px; top:12px;}#leaf strong:nth-child(5){-webkit-transform:rotate(170deg); left:18px; top:12px;}#leaf strong:nth-child(6){-webkit-transform:rotate(185deg); left:38px; top:27px;}#leaf strong: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 strong{width:6px; height:6px; border-radius:6px; background:#3B7B6D; display:inline-block; position:absolute; left:34px; top:115px;}#three strong:nth-child(2){top:150px;left:45px;}#three strong:nth-child(3){top:185px}#three strong:nth-child(4){top:220px;left:45px;}#three strong:nth-child(5){top:255px}</head><body><div id="flower">   <div id="leaf">         <strong></strong>         <strong></strong>         <strong></strong>         <strong></strong>         <strong></strong>         <strong></strong>         <strong></strong>   </div>   <div id="three">        <div></div>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>        <strong></strong>   </div></div></body></html>