HTML CSS画一朵向日葵

最新推荐文章于 2024-02-12 07:23:32 发布

前端独秀

最新推荐文章于 2024-02-12 07:23:32 发布

阅读量931

点赞数

分类专栏：前端文章标签： html5 css3 特效向日葵向日葵特效

原文链接：https://www.mk2048.com/blog/blog.php?id=hia0bakaa&title=HTML%2BCSS%E7%94%BB%E4%B8%80%E6%9C%B5%E5%90%91%E6%97%A5%E8%91%B5

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

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

前端独秀

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS画一朵向日葵

前几天看到一张图片，倔强的向日葵。（BGM，《倔强》）看着挺有感触，就想用CSS做一个向日葵。最终效果图如下：演示地址： http://suohb.com/work/sunflower.ht...
复制链接

扫一扫