前几天看到一张图片，倔强的向日葵。（BGM，《倔强》）
看着挺有感触，就想用CSS做一个向日葵。
最终效果图如下：
演示地址：
http://suohb.com/work/sunflower.html
主要的难点就在花瓣的处理上，css暂时没有做到这样的尖角圆弧。
我想到的做法是用两个椭圆的部分弧度截取出来，拼接成一个花瓣样式。
原理如下：
CSS部分
1 .petal{ 2 ????position:absolute; 3 ????width:50px; 4 ????height:130px; 5 ????transform-origin:50% 150%; 6 ????opacity:.9; 7 } 8 .petal > div:nth-child(1){ 9 ????position:absolute;10 ????left:0;11 ????top:0;12 ????width:50%;13 ????height:100%;14 ????overflow:hidden;15 }16 .petal > div:nth-child(1) > div{17 ????position:absolute;18 ????left:0;19 ????top:-20px;20 ????width:160px;21 ????height:250px;22 ????background:#F00;23 ????border-radius:50%;24 ????box-shadow: 0 0 5px #000;25 }26 .petal > div:nth-child(2){27 ????position:absolute;28 ????left:50%;29 ????top:0;30 ????width:50%;31 ????height:100%;32 ????overflow:hidden;33 }34 .petal > div:nth-child(2) > div{35 ????position:absolute;36 ????right:0;37 ????top:-20px;38 ????width:160px;39 ????height:250px;40 ????background:#F00;41 ????border-radius:50%;42 ????border-radius:50%;43 ????box-shadow: 0 0 5px #000;44 }HTML部分：
1 <div class="petal">2 ????<div>3 ????????<div></div>4 ????</div>5 ????<div>6 ????????<div></div>7 ????</div>8 </div>
这样就画出一个花瓣，
然后我们将花瓣使用js创建出来，新增一个花瓣外层div#box；将生成的花瓣插入里边。花瓣的的transform-origin属性为正下方一段距离。复制并旋转
代码如下：
1 function addPetal(){ 2 ????var len = 21 , 3 ????????i = 0 , 4 ????????scale = 1 , 5 ????var fragment = document.createDocumentFragment(); 6 ????for(i = 0 ; i < len ; i ++){ 7 ????????fragment.appendChild(getOnePetal(scale,Math.round(360/len*i))); 8 ????} 9 ????box.appendChild(fragment);10 }11 function getOnePetal(size,deg){12 ????var div = document.createElement("div");13 ????div.className = "petal" ;14 ????div.innerHTML = "<div><div></div></div><div><div></div></div>";15 ????div.style.left = 155 + "px";16 ????div.style.top = 0 ;17 ????div.style.transform = "rotate("+deg+"deg) scale("+size+")";18 ????return div ;19 }现在基本上已经看出向日葵的轮廓，我们将花瓣多复制几层，越向内层越小。给花瓣加点阴影有写层次感。
到这里就完成一大半了，然后做向日葵中心部分，画一个渐变色圆，给他加一些线条。
先在向日葵中心圆上部话一般圆形div，只要border。设置tranform-origin到向日葵的中心位置。复制这个圆并旋转。得到下图：
这也是一个很有意思的图形。给中心圆加上overflow:hidden;放在向日葵中心
做到这里主要难点都已经做完了。接下来就是把花瓣主色调改成黄色渐变，花瓣角度做一点随机处理，中心加一些花蕊，就得到了一颗向日葵。
更多特效请关注这个微信公众号
最终完整代码：
?1 <!doctype html> ?2 <html> ?3 <head> ?4 <meta http-equiv="Pragma" content="no-cache" /> ?5 <meta http-equiv="Cache-Control" content="no-cache" /> ?6 <meta http-equiv="Expires" content="0" /> ?7 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> ?8 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> ?9 <style type="text/css"> 10 .petal{ 11 ????position:absolute; 12 ????width:50px; 13 ????height:130px; 14 ????transform-origin:50% 150%; 15 ????opacity:.9; 16 } 17 .petal > div:nth-child(1){ 18 ????position:absolute; 19 ????left:0; 20 ????top:0; 21 ????width:50%; 22 ????height:100%; 23 ????overflow:hidden; 24 } 25 .petal > div:nth-child(1) > div{ 26 ????position:absolute; 27 ????left:0; 28 ????top:-20px; 29 ????width:160px; 30 ????height:250px; 31 ????background-image:linear-gradient(95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%); 32 ????box-shadow:0 0 10px rgba(0,0,0,.3); 33 ????border-radius:50%; 34 } 35 .petal > div:nth-child(2){ 36 ????position:absolute; 37 ????left:50%; 38 ????top:0; 39 ????width:50%; 40 ????height:100%; 41 ????overflow:hidden; 42 } 43 .petal > div:nth-child(2) > div{ 44 ????position:absolute; 45 ????right:0; 46 ????top:-20px; 47 ????width:160px; 48 ????height:250px; 49 ????background-image:linear-gradient(-95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%); 50 ????box-shadow:0 0 10px rgba(0,0,0,.3); 51 ????border-radius:50%; 52 } 53 #box{ 54 ????width:370px; 55 ????height:370px; 56 ????margin: 0 auto; 57 ????position: relative; 58 } 59 .pistilShadow{ 60 ????position:absolute; 61 ????left: 180px; 62 ????top:195px; 63 ????width:120px; 64 ????height:120px; 65 ????border-radius:50%; 66 ????transform:translate(-50%,-50%); 67 ????box-shadow: -5px 5px 80px #bd3d0e; 68 } 69 .pistil{ 70 ????position:absolute; 71 ????left: 180px; 72 ????top:195px; 73 ????width:160px; 74 ????height:160px; 75 ????border-radius:50%; 76 ????transform:translate(-50%,-50%); 77 ????box-shadow: 0 0 80px #bd3d0e inset; 78 ????background:#325302; 79 ????overflow:hidden; 80 } 81 .pistilLine{ 82 ????position:absolute; 83 ????left:20%; 84 ????top:-50%; 85 ????transform-origin: center bottom; 86 ????width:60%; 87 ????height:100%; 88 ????border-radius:50%; 89 ????border:solid 1px #2f1307; 90 } 91 .pistil2{ 92 ????position:absolute; 93 ????left: 180px; 94 ????top:195px; 95 ????width:60px; 96 ????height:60px; 97 ????border-radius:50%; 98 ????transform:translate(-50%,-50%); 99 ????box-shadow: 0 0 25px #bd3d0e inset;100 ????background:#325302;101 }102 .dot{103 ????position:absolute;104 ????left:28px;105 ????top:0;106 ????width:4px;107 ????height:4px;108 ????border-radius:50%;109 ????background:#fded00;110 ????box-shadow: 0 0 15px #fded00 inset;111 ????transform-origin:center 30px;112 }113 </style>114 </head>115 <body>116 <div id="box"></div>117 <script>118 119 function addPetal(){120 ????var len = 21 ,121 ????????layer = 3 ,122 ????????i = 0 ,123 ????????j = 0 ,124 ????????changeScale = 0.1 ,125 ????????scale = 1 ,126 ????????div;127 ????var fragment = document.createDocumentFragment();128 ????var pistil = document.createElement("div");129 ????pistil.className = "pistil" ;130 ????var pistil2 = document.createElement("div");131 ????pistil2.className = "pistil2" ;132 133 ????for(j = 0 ; j < layer ; j ++){134 ????????for(i = 0 ; i < len ; i ++){135 ????????????fragment.appendChild(getOnePetal(scale,Math.round(360/len*i + Math.random()*10)));136 ????????}137 ????????div = document.createElement("div");138 ????????div.className = "pistilShadow" ;139 ????????fragment.appendChild(div);140 ????????len -= 5 ;141 ????????scale -= changeScale ;142 ????????changeScale += changeScale ;143 ????}144 ????len = 40 ;145 ????for(var i = 0 ;i < len ; i ++){146 ????????div = document.createElement("div");147 ????????div.className = "pistilLine" ;148 ????????div.style.transform = "rotate("+Math.round(360/len*i)+"deg)" ;149 ????????pistil.appendChild(div);150 ????}151 ????len = 30;152 ????scale = 1 ;153 ????changeScale = 0.15 ;154 ????for(j = 0 ; j < layer ; j ++){155 ????????for(i = 0 ; i < len ; i ++){156 ????????????pistil2.appendChild(getOneDot(scale,Math.round(360/len*i+j*10)));157 ????????}158 ????????len -= 4 ;159 ????????scale -= changeScale ;160 ????}161 ????fragment.appendChild(pistil);162 ????fragment.appendChild(pistil2);163 164 ????box.appendChild(fragment);165 }166 function getOnePetal(size,deg){167 ????var div = document.createElement("div");168 ????div.className = "petal" ;169 ????div.innerHTML = "<div><div></div></div><div><div></div></div>";170 ????div.style.left = 155 + "px";171 ????div.style.top = 0 ;172 ????div.style.transform = "rotate("+deg+"deg) scale("+size+")";173 ????return div ;174 }175 function getOneDot(size,deg){176 ????var div = document.createElement("div");177 ????div.className = "dot" ;178 ????div.style.transform = "rotate("+deg+"deg) scale("+size+")";179 ????return div ;180 }181 addPetal();182 </script>183 </body>184 </html>HTML+CSS画一朵向日葵
原文地址：http://www.cnblogs.com/shb190802/p/7493265.html