前几天云之家发版，没有之前那么忙，具体可以查看我这篇文章《CSS3渗入-金蝶微博改版云之家》，而现在又是一个酝酿创意的休渔期...

前几天同事买了只新手机，在电梯里，说到微信的摇一摇，又说道TX微博也有个类似的功能，叫吹一吹，然后就演示了下，效果很漂亮，也触动我心底那根弦...蒲公英...

初中的时候班里有个高材生的文章就有过一个蒲公英的比方，离家守卫边疆的战士犹如随风漂移的棉絮，漂泊远离故乡，落地扎根...而如今我也如此，即将飘离而去，当然我不是得了什么绝症，那是坑爹韩剧里面才有的剧情，这个你看我暴力扣杀200km/h的羽球球速（纯属YY）就知道了...

闲话少说，看看效果图先吧...





你可以通过这个链接下载源代码：《CSS3 蒲公英》

在这里说明一下，我对Firefox比较有爱，所以只写moz而已，请用火狐查看；

由于该画面由纯CSS3绘制，页面渲染实在卡，做不了很细致的纯代码风吹棉絮飘散动画，源代码包有两个页面，
Dandelion_2.html是静态效果，在对应的 Dandelion元素 加类名 flyaway 可以切换出现如上图一样棉絮被风吹散的画面；
Dandelion.html是动态效果，鼠标滑过，蒲公英部分棉絮会被吹散，从左向右漂移。而这里用了背景图，因为大批量的CSS绘制机子扛不住，但是我又不想让那么动感的创意不能展现，所以我在这个页面垫了背景图，做了与《CSS3 创意PPT》背景图同样的优化方法。

下面进入正题，对蒲公英的制作方法进行分析：


一、蒲公英

一株蒲公英效果如下：



html结构，如下：

<div class="dandelion_box">
    <div class="dandelion_base">
        <div class="pompon"></div>
    </div>
    <div class="leaves">
        <i class="leaf leaf_1"></i>
        <i class="leaf leaf_2"></i>
        <i class="leaf leaf_3"></i>
        <i class="leaf leaf_4"></i>
    </div>
    <div class="dandelion_base_stem"></div>
</div>

一个蒲公英外框 dandelion_box，包含莲座 dandelion_base、叶子 leaves、主茎 dandelion_base_stem ；
莲座 dandelion_base 里面包含一颗绒球 pompon。

其实我比较喜欢蒲公英被吹散后的“裸”状态，如下：



1）莲座 dandelion_base

即是上图中的“曼妥思薄荷糖”，上面有很多小洞，蒲公英在没有被吹散之前就是安放在这莲座上的。

整一个效果只用一个标签实现，html代码就不贴了，为什么不贴，都说一个标签咯还贴啥(= =)，CSS代码如下：

.dandelion_base{
    height: 50px; width: 65px; position:relative; z-index: 2; left: 3px;
    border-radius: 65px/50px; background-color: #fcfdf8;
    background-image:
    -moz-radial-gradient(25% 25%,rgba(170,180,90,0.33) ,rgba(170,180,90,0.33) 12.5% , rgba(255,255,255,0) 12.5% ),
    -moz-radial-gradient(75% 75%,rgba(170,180,90,0.4) ,rgba(170,180,90,0.4) 12.5% , rgba(255,255,255,0) 12.5%);
    background-size: 15px 15px;
    background-position: 1px -4px;
    box-shadow:
    -5px -10px 10px rgba(152,167,124,0.5) inset,
    -3px -5px 6px rgba(152,167,124,0.5) inset,
    -2px -2px 3px rgba(152,167,124,0.5) inset,
    -1px 0px 1px rgba(50,65,26,0.6) inset,
    0px -2px 1px rgba(50,65,26,0.4) inset;
}
.dandelion_base:after{
    content:""; display:block; height:28px; width:40px; position:absolute; left:8px; top:4px;
    border-radius:40px/28px; background:rgba(255,255,255,0.7);
}

设定尺寸定位等基本信息，设置圆角背景色，然后绘制两个径向渐变作为多重背景图片，在未做背景图尺寸缩小的原效果，如下：



在第二、第四象限中心的两个圆，这里又跟《CSS3 创意PPT》的镂空背景有所不同，PPT的是多重背景后重叠再缩放，这样就是端端正正的纵向横向平铺，而现在这样的处理平铺出来的背景效果是倾斜45度的，对于植物显得更自然，要不然就变成一只带叶子的麦克风了，缩小尺寸后做一个背景偏移。在做完基本的背景之后就需要对它的阴影高光进行处理，通过多重内投影，先浅后深边缘稍加亮的处理，一颗 薄荷糖 就出来啦..哈哈..仅仅投影的话还不够，就再用 after 设置为透明白色后定位在左上角，形成高光，同时内投影、高光叠加在圆点上，会产生一种圆点颜色深浅的错觉。

2）叶子 leaves

一株蒲公英莲座下都压着四片叶子 leaf，每片叶子也都是用一个标签实现，放置于叶子容器 leaves 中，叶子的具体效果如下：



由上翠绿至下紫的线性渐变，边沿颜色略浅表示具有一定厚度，带轻微锯齿。

不知道你看到这里有没有制作的头绪? 如果没有的话，看看下面这张图，也许就会恍然大悟：



具体css代码如下：

.leaf{
    display: block; height: 100px; width: 25px; position: absolute; overflow: hidden;
}

.leaf:after{
    content:""; display:block; height:100px; width:15px; position:absolute; left:3px; top:-70px;
    background:-moz-linear-gradient(-7deg,#334022 35%,#729441 64%,#251335 95%,#251335);
    -moz-transform:skew(-5deg,83deg); 
    box-shadow:1.5px -6px 1px 3px rgba(192,207,184,0.6) inset,0px 0px 0.5px rgba(150,180,110,0.6);
    border-radius:30px;
}

leaf:after 通过变换斜切制作菱形，即叶片主体，拉一条垂直方向的由深绿到翠绿到紫的线性渐变，这里做 深-浅-深 的渐变是因为叶子会在莲座底下，莲座会在叶子上投影，所以上面需要深色一点。通过盒投影内置形成边沿厚度，调整透明度使得与底色边沿叠加后产生明暗错觉，增强立体感，然而由于元素斜切而产生的边缘锯齿，经过颜色调整，刚符合叶片特性，本来很烦的锯齿变成为了叶片的亮点。最后通过 leaf 固定宽高尺寸，截断隐藏多余部分，如图所示：



这样就完成一片叶子的制作，接着复制四份调整尺寸位置角度，尽量让叶片自然

3）主茎 dandelion_base_stem

主茎其实就是一个棍子，并且非常次要的元素存在，就简单画个从左到右的线性渐变设置粽褐色调，

background:-moz-linear-gradient(left,#b69e74,#a98d4e 30%,#95763d);

制作内投影，压深左右侧，主茎圆柱立体感形态更强些，

box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;

最后把莲座、叶片、主茎定位设置层高，完成基本框架绘制。


二、棉絮

效果如下：



放大300%后，如下：



html结构，如下：

<div class="dandelion">
     <div class="dandelion_fluff">
        <i class="dandelion_fluff_inner r15"></i>
        <i class="dandelion_fluff_inner r30"></i>
        <i class="dandelion_fluff_inner r45"></i>
        <i class="dandelion_fluff_inner r60"></i>
        <i class="dandelion_fluff_inner r75"></i>
        <i class="dandelion_fluff_inner r90"></i>
       
        <i class="dandelion_fluff_inner r15_2"></i>
        <i class="dandelion_fluff_inner r30_2"></i>
        <i class="dandelion_fluff_inner r45_2"></i>
        <i class="dandelion_fluff_inner r60_2"></i>
        <i class="dandelion_fluff_inner r75_2"></i>
     </div>
     <div class="dandelion_stem"></div>
     <div class="dandelion_seed"></div>
</div>

一朵蒲公英 dandelion，蒲公英由三部分组成：绒毛 dandelion_fluff、茎 dandelion_stem、种子 dandelion_seed ，绒毛里面挂11个 i 标签 dandelion_fluff_inner，表示一根根的绒须，通过 r15 等不同的角度来控制。

1）绒须 dandelion_fluff

具体写法如下：

.dandelion_fluff_inner:after{
   content:""; display:block; height:20px; width:30px; position:absolute;
   border-bottom:1px solid rgba(255,255,255,0.3);
   border-radius:30px 30px 20px 40px/25px 20px 5px 20px; 
   -moz-transform-origin:100% 100%;
}

设置尺寸大小，用border画绒须，调节圆角弧度，设置旋转变换顶点。
然而如果你仔细去数的话，发现不单单是11根绒须的，还用伪类before、after调整大小角度透明度，增强层次感，要不然单单11根棍杵在那儿，很生硬。

2）茎 dandelion_stem

则是设定宽高尺寸，拉由上至下线性渐变：

background: -moz-linear-gradient(top,rgba(225,219,203,0.6),rgba(201,183,136,0.8));

3）种子 dandelion_seed

同样设定尺寸，设置圆角让种子为米粒状，拉由上至下线性渐变：

background: -moz-linear-gradient(top,#46384e,#1c1a1f);

而这里用 after 制作高光，不是用box-shadow，因为后者只能实现像帷幕一样拉出来遮掩，不能实现间断叠加的层效果。


三、绒球

绒球 pompon 作为容器，包含小蒲公英 dandelion ，总共分 5 组： .dandelion_out、.dandelion_in、.dandelion_inner、.dandelion_inner_2、.dandelion_inner_3
命名感觉有点坑爹，本来打算三层就能拼出绒球的，结果还有一个很大的镂空，于是临时添加了两层，名字就无视它吧...

以 .dandelion_out 为例

.dandelion_out{ -moz-transform-origin:50% 135%;}

.dandelion_1{-moz-transform:rotate(-120deg);}
.dandelion_2{-moz-transform:rotate(-90deg);}
.dandelion_3{-moz-transform:rotate(-60deg);}
.dandelion_4{-moz-transform:rotate(-30deg);}
.dandelion_5{-moz-transform:rotate(0deg);}
.dandelion_6{-moz-transform:rotate(30deg);}
.dandelion_7{-moz-transform:rotate(60deg);}
.dandelion_8{-moz-transform:rotate(90deg);}
.dandelion_9{-moz-transform:rotate(120deg);}

设置变换原点 transform-origin 为水平中点 50%，垂直下方 135%，外圈设置 9 朵蒲公英，每朵旋转30度，效果如下：



如果不设置变换原点，那么所有蒲公英将重叠成一坨不明物体，而只是50% 100%的话，那么左右种子底部将相连。同样原理，设置其它圈层，然后调整角度，因为不可能都是偏移30度，要不然就直排排的很生硬，由于绒球，一看“球”就知道是立体的，那么立体必须有透视，近大远小，近清晰远模糊基本的细节，那么对尺寸透明度角度进行相应的调整。


四、整体

经过上面的绘制，可以得到一株蒲公英，但是一个画面一株未免太寒酸，于是添加多两株，但效果不尽人意：



三株东西直挺挺杵在那里很死板，没有大小层次，所以需要进行一个构图调整：

.dandelion_box_1{ -moz-transform:skewX(2deg); bottom:-10px; opacity:0.95; left:100px; z-index:2;}
.dandelion_box_2{ -moz-transform:scale(0.7) skewX(-1.5deg); opacity:0.8; left:155px; bottom:-45px; z-index:1;}
.dandelion_box_3{ -moz-transform:scale(0.8) skewX(-3deg); opacity:0.9; left:50px; bottom:-25px; z-index:1;}

中间 dandelion_box_1，右侧dandelion_box_2，左侧dandelion_box_3，通过变换缩放、斜切、透明度，层叠等调整后如图：



可以看出主次重点突出，层次分明，而且斜切倾斜之后，自然了许多。

五、动画

在我做一株蒲公英的时候，切换浏览器tab的时候就已经有点卡了，何况还加多两株，压根不能再整动画了，所以我整了个 flyaway 的静态定格设计。具体代码实现定位，旋转，缩放，透明度没有多大操作难度，主要是对整体疏密层次的把握而已，而里面需要注意的是，旋转，需要控制在-10deg-20deg之间，要不然会感觉变扭不自然；对于dandelion_box_2这株右侧的小蒲公英，加上 flyaway 产生飘散的同时，因为整体缩放的缘故，小蒲公英给双重缩放了，所以看起来层次感随机感更强了，画面更细致。

做完静态定格后，发现真的很不爽，因为不能动，创意大打折扣...为此我还特意去下个TX微博看看它吹一吹是怎么实现的，斟酌之后决定，提取几朵蒲公英隐藏，绘制剩下部分后截图做背景图，这样就减少了大量dom的绘制，然后把对应的蒲公英用代码绘制出来，做 transition 动画，如：

.main:hover .dandelion_3{
   -moz-transform:translate(1260px,-20px) scale(0.5) rotate(-10deg);
   opacity:0.7;
   -moz-transition:-moz-transform 4s linear,opacity 4s linear;
}

主要是位移，缩放，旋转，透明度的变换动画，然后调整时间，让蒲公英不是一次性的一堆从左到右移动，而是 先多后少 先快后慢，这样才符合被吹开飘散的效果。不过没有做的跟flyaway那样细致，本来还打算用animation 分段动画，能体现风速方向摇荡，不过算啦，浏览器彻底抹杀了我的基情与热情...

本文到此结束，感谢您的关注...欢迎继续关注 吖真博客 ，以后会有更多创意更多精彩与大家分享...