你的位置:首页 > 软件开发 > 网页设计 > HTML+CSS画一朵向日葵

HTML+CSS画一朵向日葵

发布时间:2017-09-08 11:00:09
前几天看到一张图片,倔强的向日葵。(BGM,《倔强》) 看着挺有感触,就想用CSS做一个向日葵。最终效果图如下:演示地址: 主要的难点就在花瓣的处理上,css暂时没有做到这样的尖角圆弧。我想到的做法是用两个椭圆的部分弧度截取出来,拼接成一个花瓣样式。原理如下:CSS ...

前几天看到一张图片,倔强的向日葵。(BGM,《倔强》)

HTML+CSS画一朵向日葵

 

看着挺有感触,就想用CSS做一个向日葵。

最终效果图如下:

演示地址:

 

HTML+CSS画一朵向日葵

 

主要的难点就在花瓣的处理上,css暂时没有做到这样的尖角圆弧。

我想到的做法是用两个椭圆的部分弧度截取出来,拼接成一个花瓣样式。

原理如下:

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属性为正下方一段距离。复制并旋转

HTML+CSS画一朵向日葵

代码如下:

 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 }

 

现在基本上已经看出向日葵的轮廓,我们将花瓣多复制几层,越向内层越小。给花瓣加点阴影有写层次感。

HTML+CSS画一朵向日葵

 

到这里就完成一大半了,然后做向日葵中心部分,画一个渐变色圆,给他加一些线条。

先在向日葵中心圆上部话一般圆形div,只要border。设置tranform-origin到向日葵的中心位置。复制这个圆并旋转。得到下图:

HTML+CSS画一朵向日葵

这也是一个很有意思的图形。给中心圆加上overflow:hidden;放在向日葵中心

HTML+CSS画一朵向日葵

做到这里主要难点都已经做完了。接下来就是把花瓣主色调改成黄色渐变,花瓣角度做一点随机处理,中心加一些花蕊,就得到了一颗向日葵。

HTML+CSS画一朵向日葵

 

 

更多特效请关注这个微信公众号

HTML+CSS画一朵向日葵

 

最终完整代码:

 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画一朵向日葵

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。