码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS画一朵向日葵

时间:2017-09-08 11:41:41      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:created   取出   child   viewport   代码   document   角度   content   gic   

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

标签:created   取出   child   viewport   代码   document   角度   content   gic   

原文地址:http://www.cnblogs.com/shb190802/p/7493265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!