对CSS3动画制作的制作学习已经过去一周了,今日在网上闲逛。偶遇一莲花绽开的效果,心中的哪根弦被狠狠的波动了下,脑壳里面浮现的,用CSS3将此效果实现制作出来。
思考过程
1、花瓣实现(正方形盒子,右上、左下的角度等于边框的长度)。
再基于右下,旋转45度,形成。树立花瓣
2、花朵塑形(复制相同8个盒子,进行不同角度的偏移。形成荷花形状)
HTML结构代码
CSS代码
定义动画
调用动画
注意,变形成单个花瓣状的代码没有放出来,只放出来了核心代码及原理,需要练习的童鞋自己思考下。