先看效果：

由于手机浏览器性能有限（作者优化还不到位），您看到的这个效果手机上无法查看。

为了考虑手机显示，我就只能含泪送出一朵玫瑰花了。
效果如下。

html花瓣飘落特效CSS玫瑰花后果 Java

效果查看地址：http://suohb.com/work/heart-flower.html

想讲一下整体思路。

1、画个花瓣，利用圆角加渐变背景

2、将这个花瓣在Z轴方向位置，沿着Y轴旋转

3、复制这个花瓣，很多个，很多层。

下边是紧张实现的代码

1、画一个花瓣

.flower { width: 100px; height: 100px; border-top-left-radius: 35%; border-top-right-radius: 35%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; transform-origin: center bottom; background: linear-gradient(top, #f66, #f30819 10%, #4a0004);}

2、将这个花瓣在Z轴方向位置，沿着Y轴旋转

.flower-translate { transform: translateZ(100px); transform-style: preserve-3d; transform-origin: center bottom; position: absolute; left: -50px; width: 100px; height: 100px;}.flower-rotate { width: 100px; height: 100px; transform: rotateX(20deg); transform-style: preserve-3d; transform-origin: center bottom;}

3、复制多层，入下图所示

这个步骤利用js完成。

代码过多，这里就不在列出来。

详细代码请访问我的github地址。

代码仓库地址：https://github.com/shb190802/html5

效果查看地址：http://suohb.com/work/heart-flower.html