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

情人节到了，给大家来一朵高端的玫瑰花。

在网上看到的一个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

更多特效，请扫描下方二维码关注公众号：