CSS3动画-彩虹列表
- 蛋布丁 - 大猫の意淫筆記昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.
如果你使用的是火狐浏览器或谷歌浏览器,你会发现在浏览本站时看到的界面会比使用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/.