3.花瓣特效----js+旋转+位移

1.用CSS写花瓣特效感觉写得不够灵活，很多地方都要自己计算位置，所以想用js来动态计算，我们只需要提供半径、花瓣的宽度、高度等，就可以来修改动画。

2.思路：

1.需要先知道外部容器的宽度wrapper_w和高度wrapper_h，接着获取花瓣的宽度petal_w和高度petal_h，然后将8个花瓣的div定位到外部容器的中心（为了之后的方便旋转），中心的left为（wrapper_w-petal_w）/2,top为(wrapper_h-petal_h)/2;
2.接着利用设置的花瓣半径，来计算每个div距离中心的位置，因为有8个div，所以每45度的边上就有一个div，如下图所示：

3.然后获得8个div的动画，为其动态的添加@keyframes动画帧，之后就可以随意修改动画的参数了。

3.具体代码：