情人節到了，給大家來一朵高端的玫瑰花。
在網上看到的一個canvas實現的玫瑰花，效果很好，但是代碼被壓縮過，也沒有注釋，看的雲里霧里的。
今天我教大腳用CSS來實現一朵玫瑰花。
先看效果
首先我們畫出一個花瓣
1、畫出一個長方形div，背景色設置成漸變色。
2、給四個角使用圓角，底部50%，頂部35%
然后使用css的3D屬性
3D屬性的詳細請自行百度，這里不做詳細介紹。
從Y軸方向上俯視玫瑰花，就是多個花瓣圍繞圓心組成的同心圓。
如下圖所示：
我們按照這個規則
1、越靠近中心層，花瓣數量越少
2、所有花瓣按在每層花瓣個數，均勻分布
這樣就成為了含苞待放的玫瑰
要想讓玫瑰花開發，那么每朵花瓣就不應該跟Y軸平行
必須要從跟Y軸形成向外的角度。
而且越向外層，角度越大。
這個時候就基本上完成了玫瑰花的效果了。
但是在chrome上，后邊加入的div會蓋在上邊層上，並不一定是我們希望的效果。
所以我們要根據div的Z軸方向上的值來給div增加z-index屬性。
z值越小，z-index越小。
最后我們跟玫瑰花加上葉子，跟之前花瓣原理是一樣的，只是換了顏色和寬度而已。
而且向外開的角度也增大了一些
這里就已經完成了，我們把代碼復制一份，然后使用requestAnimationFrame做動畫效果。角度越來越大。就出現開花效果了。
演示效果請訪問：http://suohb.com/work/flower2.htm
更多特效，請掃描下方二維碼關注公眾號：