CSS3的动画特效

fmms 12年前
     <p> 如果你使用的是火狐浏览器或谷歌浏览器,你会发现在浏览网站时看到的界面会比使用 IE6 或 IE7 浏览时要漂亮的多,因为在这些页面上使用了 CSS3 里某些特效,比如圆角效果(border-radius),阴影效果(box-shadow)等。</p>    <p> CSS3比 CSS2 增加了很多神奇的东西,但由于 CSS3 标准还比较新,只有少数的现代浏览器支持这些特效,但随着火狐和谷歌浏览器的慢慢普及,相信不久所有的网站都会开始使用 CSS3。</p>    <p> 本文要向大家介绍的是 css3 里的动画特效。不用任何的 Javascript,只用纯 CSS,你就能实现令人相当吃惊的动画效果,甚至是3D 动画效果。还是那句话,如果你使用的是火狐或谷歌浏览器,你就能看到下面的有个人在走动,背景有浮云飘过,有路标在移动。是不是很神奇!</p>    <p> 在这个动画中用到的主要的 CSS3 的元素有<code>keyframes</code>,<code>transform: rotate</code> 和<code>transform: translateX</code>,通过对这些属性提供不同的参数,你就得到一个逼真的动画效果,神奇吧!</p>    <p> 这个动画效果来自于 <a href="/misc/goto?guid=4958196095448952839">http://andrew-hoyer.com/experiments/walking/</a>.</p>    <p style="text-align:center;"><img title="CSS3的动画特效" border="0" alt="CSS3的动画特效" src="https://simg.open-open.com/show/62ab15d4237de7154e6b5f5e5822320f.png" width="494" height="578" /></p>    <div id="come_from">     来自:     <a id="link_source2" href="/misc/goto?guid=4958196096196798340" target="_blank">外刊IT评论</a>    </div>