前几天看到一张图片，倔强的向日葵。（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>