1
顶

前端技术 CSS3

CSS3的动画特效

作者 fmms 2011-10-27 08:28:08

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

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

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

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

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

CSS3的动画特效

来自: 外刊IT评论
本站文章除注明转载外，均为本站原创或翻译
欢迎任何形式的转载，但请务必注明出处

0 评   踩