CSS3实例教程:CSS3制作玻璃瓶里的水母

武林网(www.vevb.com)文章简介：CSS3实现四叶草、水母与玻璃瓶。

玻璃瓶质感、四叶草漂浮于水面，荡起涟漪、摇摆上升的气泡…很美的意境，然而你也许会说你喜欢瓶子不喜欢四叶草，那可以把四叶草给none掉，不喜欢植物的话，那你喜不喜欢动物呢：

应该看得懂这只萌物是什么生物吧..没错，水母 一只…众生皆平等，不能只有植物没有动物哈…

然而你也许不喜欢蓝色的水，那我写几套多彩的玻璃瓶：

如果你感兴趣的话，可以通过这个链接，下载我的源代码：《四叶草、水母与玻璃瓶》

为方便下载，提供本人网盘帐号密码，请不要弄乱里面的页面，以方便其它人下载，谢谢。

帐号：287019674@qq.com

密码：123456

下面是对代码的分析：

四叶草的代码结构如下：

123456789>>><><><><>><>

一个leaves挂着叶子，叶瓣用四个I标签表示，一个branch代表叶茎

每 个叶瓣都是一个leave，然后用angle控制它们的旋转，然而一个leave的话是画不出一个心形的，所以我用多了一个leave:after画另 外一半，两个表现出来的形状是一样的，一个头圆下方的形状，圆可以用border-radius圆角来做，然后通过以左下角为原点，旋转90度，来让它们 错开重叠成一个心形，如果你觉得抽象的话，可以参考下图：

我把leave:after的颜色调深一些，就可以看出它们是怎么一个重叠关系了…因为叶瓣与叶瓣之间存在之间隙，所以我旋转的原点有稍作偏移，而且在心形的底部如果太尖感觉有点怪，所以也做了一个小圆角处理，到此叶瓣主体就绘制完成。

叶茎的话就是一个border做了一个大弧度圆角跟小弧度圆角的处理，如图：

如果border处于圆角状态，并且临近的border不显示，那么该border会向不显示的border拉一条锥形弧线， 这形状恰巧符合叶茎的形状，大弧度何以勾勒叶茎的基本形状，小弧度可以用来收尾，这样会比直角收尾柔和很多，到此四叶草制作完毕。