加载中…
个人资料
陈在真Sunny_chen
陈在真Sunny_chen
  • 博客等级:
  • 博客积分:0
  • 博客访问:198,962
  • 关注人气:183
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
正文 字体大小:

CSS3 蒲公英

(2012-08-14 09:21:00)
标签:

陈在真

css3

蒲公英

dandelion

飘散

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

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

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

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

CSS3 <wbr>蒲公英

CSS3 <wbr>蒲公英

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

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

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

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


一、蒲公英

一株蒲公英效果如下:

CSS3 <wbr>蒲公英

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。

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

CSS3 <wbr>蒲公英

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 <wbr>蒲公英

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

2)叶子 leaves

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

CSS3 <wbr>蒲公英

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

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

CSS3 <wbr>蒲公英

具体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 固定宽高尺寸,截断隐藏多余部分,如图所示:

CSS3 <wbr>蒲公英

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

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;

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


二、棉絮

效果如下:

CSS3 <wbr>蒲公英

放大300%后,如下:

CSS3 <wbr>蒲公英

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度,效果如下:

CSS3 <wbr>蒲公英

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


四、整体

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

CSS3 <wbr>蒲公英

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

.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,通过变换缩放、斜切、透明度,层叠等调整后如图:

CSS3 <wbr>蒲公英

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

五、动画

在我做一株蒲公英的时候,切换浏览器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 分段动画,能体现风速方向摇荡,不过算啦,浏览器彻底抹杀了我的基情与热情...

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








0

阅读 评论 收藏 转载 喜欢 打印举报/Report
前一篇:CSS3 创意PPT
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

    < 前一篇CSS3 创意PPT
      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有