盛开的CSS3梦幻荷花

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

13464

发布于 16 条评论

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

答案是肯定的,还是那句古老的名言:只有想不到没有做不到。例如一个元素的动画可以同时包含几个动画名:animation-name(即代表可以在现有的动画基础上继续添加动画,使之丰富);我们还可以针对不同的元素添加动画,然后叠加起来,例如:<div><span></span></div>,我们可以分别给divdiv 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
    13
  2. CPU资源消耗真大。。。。
    这样浪费能源大丈夫???

    啊哈 2013-04-01
    12
  3. 超贊呢,好厲害.

    11
  4. 看的有点晕

    10
  5. 不错

    都是 2013-04-01
    9
  6. 果然漂亮!看的我有点眼花缭乱!

    精油 2013-04-01
    8
  7. 具体详细,不错的效果,欣赏一下

    7
  8. 在搜狗浏览器下,啥也没看到!

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

    5
    1. Javin

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

      1号 Javin 2013-04-01
  10. 效果很强大,可以变一下形状当成背景神马的,增强点动感效果。

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

    大发 2013-04-01
    3
    1. Javin

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

      1号 Javin 2013-04-01
  12. 如果网页没有 css 的话就那该多惨

    2
    1. Javin

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

      1号 Javin 2013-04-01
  13. css能搞出这样的效果,不可思议啊。

    1