HTML+CSS畫一朵嚮日葵_ZenDei技術網路在線

前幾天看到一張圖片，倔強的嚮日葵。（BGM，《倔強》）看著挺有感觸，就想用CSS做一個嚮日葵。最終效果圖如下：演示地址： http://suohb.com/work/sunflower.html 主要的難點就在花瓣的處理上，css暫時沒有做到這樣的尖角圓弧。我想到的做法是用兩個橢圓的部分弧度 ...

前幾天看到一張圖片，倔強的嚮日葵。（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