前几天看到一张图片，倔强的向日葵。（BGM，《倔强》）

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

最终效果图如下：

演示地址：

http://suohb.com/work/sunflower.html

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

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

原理如下：

CSS部分

 .petal{

     position:absolute;

     width:50px;

     height:130px;

     transform-origin:50% 150%;

     opacity:.9;

 }

 .petal > div:nth-child(1){

     position:absolute;

     left:;

     top:;

     width:50%;

     height:100%;

     overflow:hidden;

 }

 .petal > div:nth-child(1) > div{

     position:absolute;

     left:;

     top:-20px;

     width:160px;

     height:250px;

     background:#F00;

     border-radius:50%;

     box-shadow: 0 0 5px #000;

 }

 .petal > div:nth-child(2){

     position:absolute;

     left:50%;

     top:;

     width:50%;

     height:100%;

     overflow:hidden;

 }

 .petal > div:nth-child(2) > div{

     position:absolute;

     right:;

     top:-20px;

     width:160px;

     height:250px;

     background:#F00;

     border-radius:50%;

     border-radius:50%;

     box-shadow: 0 0 5px #000;

 }

HTML部分：

 <div class="petal">

     <div>

         <div></div>

     </div>

     <div>

         <div></div>

     </div>

 </div>

这样就画出一个花瓣，

然后我们将花瓣使用js创建出来，新增一个花瓣外层div#box；将生成的花瓣插入里边。花瓣的的transform-origin属性为正下方一段距离。复制并旋转

代码如下：

 function addPetal(){

     var len = 21 ,

         i = 0 ,

         scale = 1 ,

     var fragment = document.createDocumentFragment();

     for(i = 0 ; i < len ; i ++){

         fragment.appendChild(getOnePetal(scale,Math.round(360/len*i)));

     }

     box.appendChild(fragment);

 }

 function getOnePetal(size,deg){

     var div = document.createElement("div");

     div.className = "petal" ;

     div.innerHTML = "<div><div></div></div><div><div></div></div>";

     div.style.left = 155 + "px";

     div.style.top = 0 ;

     div.style.transform = "rotate("+deg+"deg) scale("+size+")";

     return div ;

 }

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

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

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

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

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

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

最终完整代码：

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Pragma" content="no-cache" />

 <meta http-equiv="Cache-Control" content="no-cache" />

 <meta http-equiv="Expires" content="0" />

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

 <style type="text/css">

 .petal{

     position:absolute;

     width:50px;

     height:130px;

     transform-origin:50% 150%;

     opacity:.9;

 }

 .petal > div:nth-child(1){

     position:absolute;

     left:0;

     top:0;

     width:50%;

     height:100%;

     overflow:hidden;

 }

 .petal > div:nth-child(1) > div{

     position:absolute;

     left:0;

     top:-20px;

     width:160px;

     height:250px;

     background-image:linear-gradient(95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);

     box-shadow:0 0 10px rgba(0,0,0,.3);

     border-radius:50%;

 }

 .petal > div:nth-child(2){

     position:absolute;

     left:50%;

     top:0;

     width:50%;

     height:100%;

     overflow:hidden;

 }

 .petal > div:nth-child(2) > div{

     position:absolute;

     right:0;

     top:-20px;

     width:160px;

     height:250px;

     background-image:linear-gradient(-95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);

     box-shadow:0 0 10px rgba(0,0,0,.3);

     border-radius:50%;

 }

 #box{

     width:370px;

     height:370px;

     margin: 0 auto;

     position: relative;

 }

 .pistilShadow{

     position:absolute;

     left: 180px;

     top:195px;

     width:120px;

     height:120px;

     border-radius:50%;

     transform:translate(-50%,-50%);

     box-shadow: -5px 5px 80px #bd3d0e;

 }

 .pistil{

     position:absolute;

     left: 180px;

     top:195px;

     width:160px;

     height:160px;

     border-radius:50%;

     transform:translate(-50%,-50%);

     box-shadow: 0 0 80px #bd3d0e inset;

     background:#325302;

     overflow:hidden;

 }

 .pistilLine{

     position:absolute;

     left:20%;

     top:-50%;

     transform-origin: center bottom;

     width:60%;

     height:100%;

     border-radius:50%;

     border:solid 1px #2f1307;

 }

 .pistil2{

     position:absolute;

     left: 180px;

     top:195px;

     width:60px;

     height:60px;

     border-radius:50%;

     transform:translate(-50%,-50%);

     box-shadow: 0 0 25px #bd3d0e inset;

     background:#325302;

 }

 .dot{

     position:absolute;

     left:28px;

     top:0;

     width:4px;

     height:4px;

     border-radius:50%;

     background:#fded00;

     box-shadow: 0 0 15px #fded00 inset;

     transform-origin:center 30px;

 }

 </style>

 </head>

 <body>

 <div id="box"></div>

 <script>

 function addPetal(){

     var len = 21 ,

         layer = 3 ,

         i = 0 ,

         j = 0 ,

         changeScale = 0.1 ,

         scale = 1 ,

         div;

     var fragment = document.createDocumentFragment();

     var pistil = document.createElement("div");

     pistil.className = "pistil" ;

     var pistil2 = document.createElement("div");

     pistil2.className = "pistil2" ;

     for(j = 0 ; j < layer ; j ++){

         for(i = 0 ; i < len ; i ++){

             fragment.appendChild(getOnePetal(scale,Math.round(360/len*i + Math.random()*10)));

         }

         div = document.createElement("div");

         div.className = "pistilShadow" ;

         fragment.appendChild(div);

         len -= 5 ;

         scale -= changeScale ;

         changeScale += changeScale ;

     }

     len = 40 ;

     for(var i = 0 ;i < len ; i ++){

         div = document.createElement("div");

         div.className = "pistilLine" ;

         div.style.transform = "rotate("+Math.round(360/len*i)+"deg)" ;

         pistil.appendChild(div);

     }

     len = 30;

     scale = 1 ;

     changeScale = 0.15 ;

     for(j = 0 ; j < layer ; j ++){

         for(i = 0 ; i < len ; i ++){

             pistil2.appendChild(getOneDot(scale,Math.round(360/len*i+j*10)));

         }

         len -= 4 ;

         scale -= changeScale ;

     }

     fragment.appendChild(pistil);

     fragment.appendChild(pistil2);

     box.appendChild(fragment);

 }

 function getOnePetal(size,deg){

     var div = document.createElement("div");

     div.className = "petal" ;

     div.innerHTML = "<div><div></div></div><div><div></div></div>";

     div.style.left = 155 + "px";

     div.style.top = 0 ;

     div.style.transform = "rotate("+deg+"deg) scale("+size+")";

     return div ;

 }

 function getOneDot(size,deg){

     var div = document.createElement("div");

     div.className = "dot" ;

     div.style.transform = "rotate("+deg+"deg) scale("+size+")";

     return div ;

 }

 addPetal();

 </script>

 </body>

 </html>

HTML+CSS画一朵向日葵的更多相关文章

  1. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  4. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  7. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

随机推荐

  1. java多线程系列(四)---Lock的使用

    Lock的使用 前言:本系列将从零开始讲解java多线程相关的技术,内容参考于<java多线程核心技术>与<java并发编程实战>等相关资料,希望站在巨人的肩膀上,再通过我的理 ...

  2. html超级简单实现点赞（收藏）和取消赞效果

    1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...

  3. 消息队列NetMQ 原理分析5-StreamEngine、Encord和Decord

    消息队列NetMQ 原理分析5-StreamEngine,Encord和Decord 前言 介绍 目的 StreamEngine 发送数据 接收数据 流程分析 Encoder V2Encoder V1 ...

  4. 字符串匹配之KMP，C++实现

    文字介绍KMP我就不讲了,相信大家看了不少别的文章也没看懂,我肯定也不能用文字表达清楚. 最好的办法就是看严老师的视频,讲的很清晰. 请百度 KMP 严蔚敏: 在这里我用C++实现一下: #inclu ...

  5. Quartus16.0如何使用TCL脚本

    前言 TCL脚本语言在EDA工具中使用频繁,本文主要介绍使用TCL脚本文件进行引脚分配,避免手动分配以及分配出错: 流程 1.准备好你的TCL脚本文件,举个栗子(脚本文件内容): 2.在Quartus ...

  6. JavaScript原型及继承

    一.浅谈原型 首先我们要知道创建对象的方法有两种: 1.通过字面量的方式直接创建 var obj = { name:'baimao', age:21 } 2.通过构造函数创建对象 function P ...

  7. pentaho专题系列之kettle篇--kettle源码编译

    最近看了一些kettle的文章,都是kettle7.0以前的,已经跟不上时代了.截止笔者写这篇文章的时候,github上面的已经是7.1.0.3了,而且是发行版的,最新的快照版本已经是8.0的了.基于 ...

  8. 运用经典方法进行横截面数据分类 笔记 （基于R）

    参考资料: [1]吴喜之. 复杂数据统计方法[M]. 中国人民大学出版社, 2015. 一.logistic回归与probit回归 logistic回归和probit回归都属于广义线性模型. 广义线性 ...

  9. python学习之列表和字典

    列表 基本操作>>>len([1,3,4])3 >>>[1,2,3]+[4,5,6]    +号两边必须是相同类型[1,2,3,4,5,6] >>> ...

  10. javaweb 登陆注册页面

    视图的数据修改,表中也修改引用工具类用<%@ page import=""%> <%@ page import="java.util.Date" ...