盛开的CSS3梦幻荷花

这是一个利用 css3 制作的动画，众所周知，用 css3 制作动画可以用Animation和transform属性来实现。我们通过官方的介绍，都大概的了解这两个属性，但展示出来的动画示例大都是比较简单的；在之前的一篇文章也提到了这一点《REQUESTANIMATIONFRAME 制作动画：旋转风车》。那对于比较丰富复杂的动画，我们是否也可以利用这两个属性来实现呢？特别是在移动设备上的展示。

答案是肯定的，还是那句古老的名言：只有想不到没有做不到。例如一个元素的动画可以同时包含几个动画名：animation-name（即代表可以在现有的动画基础上继续添加动画，使之丰富）；我们还可以针对不同的元素添加动画，然后叠加起来，例如：

，我们可以分别给div和div span添加动画效果，其最终的效果是叠加起来的，从而达到丰富动画的效果。

盛开的CSS3梦幻荷花

查看预览下载附件

今天为大家分享的示例 — 盛开的 CSS3 梦幻荷花，就是利用上面所说的同时添加多个animation-name来实现简单动画的叠加，最终达到丰富的梦幻效果。

HTML 结构代码

<div class="scene">    <div class="container">      <div class="wrapper">        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>      </div>      <div class="wrapper">        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>        <div class="animationItem"></div>      </div>    </div>  </div>

从上面的简单结构代码中我们可以看出，在后续的 css 编写中主要利用 css 的继承性和.animationItem:nth-child(n)选择符的巧妙运用和结合达到每个元素的统一化和差异化，具体的编写方式可以参考附件中的代码。

查看预览下载附件

注：由于 css 样式的代码量太大，所以就不贴出来了，有需要的同学请下载附件后再详细的参阅，谢谢。

注：用谷歌浏览器浏览效果更加。

转载自：盛开的 CSS3 梦幻荷花

-- 完 --