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 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>

转载于:https://www.cnblogs.com/shb190802/p/7493265.html

HTML+CSS画一朵向日葵相关推荐

HTML CSS画一朵向日葵
前几天看到一张图片,倔强的向日葵.(BGM,<倔强>) 看着挺有感触,就想用CSS做一个向日葵. 最终效果图如下: 演示地址: http://suohb.com/work/sunflowe ...
用css给我画一朵花
好的,那么我们可以用 CSS 中的 ::before 和 ::after 伪元素来画一朵花. 首先,我们需要定义一个元素作为花的容器,并给它一个高度和宽度.然后,我们可以在这个元素的 ::before ...
html的css雪花动效,《前端每日实战》第171号作品：用纯 CSS 绘制一朵美丽的雪花...
昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一.效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 二.源代码下载每日 ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
用python画玫瑰花代码-用python画一朵玫瑰给你
原标题:用python画一朵玫瑰给你版权声明:原创文章转载请注明来源. https://blog.csdn.net/samll_snail/article/details/85853630 听说 p ...
如何用python画一朵玫瑰花-使用Python画一朵美丽的玫瑰花
原标题:使用Python画一朵美丽的玫瑰花 turtle 是 python 中一个强大的绘制图像的库,可以用来绘制各种图像,使用起来很方便.看看本文使用Python的turtle库画一朵美丽的玫瑰花, ...
html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏教程_W3cplus...
CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...

HTML+CSS画一朵向日葵

HTML+CSS画一朵向日葵相关推荐

最新文章

热门文章