CSS3的动画特效

如果你使用的是火狐浏览器或谷歌浏览器,你会发现在浏览本站时看到的界面会比使用IE6或IE7浏览时要漂亮的多,因为在这些页面上使用了CSS3里某些特效,比如圆角效果(border-radius),阴影效果(box-shadow)等。

CSS3比CSS2增加了很多神奇的东西,但由于CSS3标准还比较新,只有少数的现代浏览器支持这些特效,但随着火狐和谷歌浏览器的慢慢普及,相信不久所有的网站都会开始使用CSS3。

本文要向大家介绍的是css3里的动画特效。不用任何的Javascript,只用纯CSS,你就能实现令人相当吃惊的动画效果,甚至是3D动画效果。还是那句话,如果你使用的是火狐或谷歌浏览器,你就能看到下面的有个人在走动,背景有浮云飘过,有路标在移动。是不是很神奇!

在这个动画中用到的主要的CSS3的元素有keyframestransform: rotatetransform: translateX,通过对这些属性提供不同的参数,你就得到一个逼真的动画效果,神奇吧!

这个动画效果来自于http://andrew-hoyer.com/experiments/walking/.

分享这篇文章:

14 Responses to CSS3的动画特效

  1. tongDou says:

    我用的是firefox3.6没有看到任何动态效果!

  2. 自由国度 says:

    不错!!!

  3. mz says:

    先得统一各个浏览器的不同写法才能提大规模应用啊

  4. y says:

    很棒!这处css3从哪里可以看到它的应用?我也好想弄出一个这样的效果。苦于不知从哪里可以看到这类的书。

  5. mYSol says:

    这个效果很酷啊!!
    firefox7.0
    mark

  6. chris_zley says:

    虽然不是很明白,但总觉得很厉害

  7. changeit says:

    OPERA支持的不太好

  8. flyfish30 says:

    safari 5.0效果很好,没有问题

  9. ShengFQ says:

    I like it

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据