• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

盛开的CSS3梦幻荷花

网络技术 云落 5年前 (2014-10-11) 579次浏览 0个评论

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

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

,我们可以分别给divdiv 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 梦幻荷花


-- 完 --
盛开的CSS3梦幻荷花
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:盛开的CSS3梦幻荷花

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:盛开的CSS3梦幻荷花
喜欢 (4)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址