这是一个利用css3制作的动画,众所周知,用css3制作动画可以用Animation
和transform
属性来实现。我们通过官方的介绍,都大概的了解这两个属性,但展示出来的动画示例大都是比较简单的;在之前的一篇文章也提到了这一点《REQUESTANIMATIONFRAME制作动画:旋转风车》。那对于比较丰富复杂的动画,我们是否也可以利用这两个属性来实现呢?特别是在移动设备上的展示。
答案是肯定的,还是那句古老的名言:只有想不到没有做不到。例如一个元素的动画可以同时包含几个动画名:animation-name
(即代表可以在现有的动画基础上继续添加动画,使之丰富);我们还可以针对不同的元素添加动画,然后叠加起来,例如:
,我们可以分别给div
和div span
添加动画效果,其最终的效果是叠加起来的,从而达到丰富动画的效果。
查看预览下载附件
今天为大家分享的示例 — 盛开的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梦幻荷花
-- 完 --
查看预览下载附件
今天为大家分享的示例 — 盛开的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梦幻荷花
-- 完 --