前几天看到一张图片,倔强的向日葵。(BGM,《倔强》) 看着挺有感触,就想用CSS做一个向日葵。最终效果图如下:演示地址: 主要的难点就在花瓣的处理上,css暂时没有做到这样的尖角圆弧。我想到的做法是用两个椭圆的部分弧度截取出来,拼接成一个花瓣样式。原理如下:CSS ...
前几天看到一张图片,倔强的向日葵。(BGM,《倔强》)
看着挺有感触,就想用CSS做一个向日葵。
最终效果图如下:
演示地址:
主要的难点就在花瓣的处理上,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画一朵向日葵
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。