盛开的CSS3梦幻荷花

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

19770

发布于 16 条评论

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

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

css3-dream-lotus-blooming

查看预览下载附件

今天为大家分享的示例 — 盛开的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样式的代码量太大，所以就不贴出来了，有需要的同学请下载附件后再详细的参阅，谢谢。

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

相关推荐

全部评论 / 16

  1. rtrt你哈啊

    rty 2013-04-01
    20

  2. CPU资源消耗真大。。。。
    这样浪费能源大丈夫？？？

    啊哈 2013-04-01
    19

  3. 超贊呢,好厲害.

    過路的馬甲 2013-04-01
    18

  4. 看的有点晕

    金银天地 2013-04-01
    17

  5. 不错

    都是 2013-04-01
    16

  6. 果然漂亮！看的我有点眼花缭乱！

    精油 2013-04-01
    15

  7. 具体详细，不错的效果，欣赏一下

    ixwebhosting 2013-04-01
    14

  8. 在搜狗浏览器下，啥也没看到！

    服装搭配 2013-04-01
    13

  9. 看到一个奔驰的广告，貌似都是图片，但是滚动滑鼠可以实现动态效果，如何实现的？这是地址：http://a-class.mercedes-benz.com.cn/cn/zh/#!/?s=teaser-highlight

    xinsenz 2013-04-01
    12
    1. Javin

      这个应该是视差滚动效果，具体可以去了解下视差滚动。

      1号 Javin 2013-04-01

  10. 效果很强大，可以变一下形状当成背景神马的，增强点动感效果。

    潜行者m 2013-04-01
    11

  11. 感觉都不实用啊。。。

    大发 2013-04-01
    10
    1. Javin

      主要是学习制作思路，学习新的思维方式

      1号 Javin 2013-04-01

  12. 如果网页没有 css 的话就那该多惨

    容掌柜 2013-04-01
    9
    1. Javin

      css就是装饰，没有装饰那所有的网站都是一个模样了。

      1号 Javin 2013-04-01

  13. css能搞出这样的效果，不可思议啊。

    胖妹纸 2013-04-01
    8