情人節，教大家使用CSS畫出一朵玫瑰花。

情人節到了，給大家來一朵高階的玫瑰花。

在網上看到的乙個canvas實現的玫瑰花，效果很好，但是**被壓縮過，也沒有注釋，看的雲裡霧裡的。

今天我教大腳用css來實現一朵玫瑰花。

先看效果

首先我們畫出乙個花瓣

1、畫出乙個長方形div，背景色設定成漸變色。

2、給四個角使用圓角，底部50%，頂部35%

然後使用css的3d屬性

從y軸方向上俯視玫瑰花，就是多個花瓣圍繞圓心組成的同心圓。

如下圖所示：

我們按照這個規則

1、越靠近中心層，花瓣數量越少

2、所有花瓣按在每層花瓣個數，均勻分布

這樣就成為了含苞待放的玫瑰

要想讓玫瑰花開發，那麼每朵花瓣就不應該跟y軸平行

必須要從跟y軸形成向外的角度。

而且越向外層，角度越大。

這個時候就基本上完成了玫瑰花的效果了。

但是在chrome上，後邊加入的div會蓋在上邊層上，並不一定是我們希望的效果。

所以我們要根據div的z軸方向上的值來給div增加z-index屬性。

z值越小，z-index越小。

最後我們跟玫瑰花加上葉子，跟之前花瓣原理是一樣的，只是換了顏色和寬度而已。

而且向外開的角度也增大了一些

這裡就已經完成了，我們把**複製乙份，然後使用requestanimationframe做動畫效果。角度越來越大。就出現開花效果了。

標籤: 

css3, 

html5, 

玫瑰花

情人節，教大家使用css畫出一朵玫瑰花。

情人節到了，給大家來一朵高階的玫瑰花。在網上看到的乙個canvas實現的玫瑰花，效果很好，但是 被壓縮過，也沒有注釋，看的雲裡霧裡的。今天我教大腳用css來實現一朵玫瑰花。先看效果 首先我們畫出乙個花瓣 1 畫出乙個長方形div，背景色設定成漸變色。2 給四個角使用圓角，底部50 頂部35 然後使用...

情人節英語

this valentine is for the girl who stole my heart.這份情人節禮物，是送給那位偷去我的心的女孩 thank you for comforting me when i m sad 感謝你在我傷心時安慰我 loving me when i was mad ...

情人節快樂

蘭蘭 春節在齊齊哈爾過得挺開心的，就是不爽的在本命年伊始就把腳拇指給等掉了，一蹬走紅阿，在游泳時蹬破的。你工作了，長大了，就會更加孝順，都是責任了，越來越累。我都沒有看過什麼電影，在齊齊哈爾這個落後的地方訊息 也閉塞了，當然也體會到了很多有意義的事情，第一次滑雪，溜冰，新鮮！今天是情人節，由於實驗室...