前几天看到一张图片，倔强的向日葵。（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>
时间： 2024-11-07 20:27:34