CSS3动画-彩虹列表
- 蛋布丁 - 大猫の意淫筆記昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.
【外刊IT评论网】CSS3的动画特效
标签：
动画效果
技术技巧
css3
| 发表时间：2011-10-27 00:50 | 作者：Aqee iVane
出处：http://www.aqee.net
本刊评论
本文来自外刊IT评论网(www.aqee.net)，原始地址：CSS3的动画特效
如果你使用的是火狐浏览器或谷歌浏览器，你会发现在浏览本站时看到的界面会比使用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/.
本文来自外刊IT评论网(www.aqee.net)，原始地址：CSS3的动画特效
相关 [it css3 动画] 推荐：
CSS3动画效果-animate.css
- - WEB前端开发animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出，滑块，淡入淡出，放大缩小等等. 你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页：http://daneden.me/animate/ git地址：https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.
优美的CSS3动画进度条
- - 可咔酷 | 网络杂货铺CSS3已经被越来越多地使用在一些项目中了，国内虽然IE6的份额还是很高，但是一些知名的互联网公司在项目权衡下还是会加入一些CSS3的元素，毕竟CSS3可以让我们更加方便的做出一些以前需要有大量的背景图片或者其他资源才能完成的效果，比如圆角、阴影等等. 下面是一个非常优美的CSS3进度条，效果图如下，非常漂亮吧：.
常用CSS3动画效果合集-animate.css
- - 我爱互联网css是一个比较酷、炫的一个动画合集，很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性
(@yixieshi).
10个css3/javascript动画插件/框架
- - ria之家--RIA三部曲：jquery、ext、flexjquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面. 应该是目前针对transform最为全面的动画库，特点支持3D动画特性：. 非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下. 相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：.
【外刊IT评论网】CSS3的动画特效
- iVane - 外刊IT评论如果你使用的是火狐浏览器或谷歌浏览器，你会发现在浏览本站时看到的界面会比使用IE6或IE7浏览时要漂亮的多，因为在这些页面上使用了CSS3里某些特效，比如圆角效果(border-radius),阴影效果(box-shadow)等. CSS3比CSS2增加了很多神奇的东西，但由于CSS3标准还比较新，只有少数的现代浏览器支持这些特效，但随着火狐和谷歌浏览器的慢慢普及，相信不久所有的网站都会开始使用CSS3.
animate.css 一些常用的CSS3动画效果
- - 前端观察大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流. animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下. 项目主页： http://daneden.me/animate/. 自定义下载样式： http://daneden.me/animate/build/.
css3 变形
- - 博客园_Ruby's LouvreCSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多. 利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.
CSS3 代码生成工具：Create CSS3
- - 我爱水煮鱼CSS3 具有相当多的新增属性，而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久，各个浏览器厂商还在开发中，有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂，一旦写错就会导致出现问题. 为此，有人开发了一个生成 CSS3 代码的工具 Create CSS3.
CSS3 文字渐变
- slackware - 前端观察之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯，只有webkit浏览器支持，请暂时无视其它浏览器. 在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可.