武林網(www.49028c.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拉一條錐形弧線， 這形狀恰巧符合葉莖的形狀，大弧度何以勾勒葉莖的基本形狀，小弧度可以用來收尾，這樣會比直角收尾柔和很多，到此四葉草制作完畢。