6/21

为您的设计
寻找专业的前端切图服务。

50个CSS3制作的超棒动画

渴切编辑:css3的出现给我们对网页的理解又提高了一个层次,css3制作的动画居然丝毫不逊于flash, 这点是非常让我们惊讶的,css3制作的动画流畅,漂亮,简单,生动。光说没感觉,下面带领大家体会一下。CSS3为我们带来了令人惊叹的新特性,而最有 趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的 CSS3技术带来的动画特效,请大家使用如SafariChrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)

1.CSS3实现钟表效果(基于jQuery)

使用CSS3的基本变形特性:rotate,并结合了jQuery这类javaScript框架制作的CSS3时钟效果。

2.模拟时钟

模拟时钟基于过渡webkit和CSS3变形,javascript用于将其按当前时间转动。

3.可使用箭头键旋转的3D立方体

你可以使用上、下、左、右方向键控制这个3D立方体,它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。

4.多种3D立方体(淡入淡出)

多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ,我个人觉得效果很震撼,你能看到写在3D立方体上的透视感极强的文字。

5.CSS3手风琴效果

使用CSS3实现的手风琴菜单效果,基于webkit浏览器专有属性。

6.自动滚动视差效果

自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。

7.Isocube

Isocube有些类似于3D立方体,但也有不同之处,它可以让他片贴在立方体面。

8.CSS3图片集

9.CSS3 Matrix(黑客帝国效果)

黑客帝国是最棒的科幻小说改编电影之一,现在使用纯CSS就能实现电影中的矩阵效果。

10.7种CSS3结合javascript技术的特效

7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动, 轻移, 扩大, 跳动, 旋转 和 手风琴效果。

11.各种鼠标悬停图片特效

六个由CSS3替代JavaScript而实现的鼠标悬停图片效果,CSS3实现这种悬停效果依然很炫!

12.旋转的可口可乐易拉罐(使用滚动条控制)

13.3D 《宫女》

14.宝利来画廊

宝利来画廊是由CSS3技术实现的将一些照片堆在一起,有趣的是鼠标悬停照片是,照片会旋转并缓慢放大~

15.太空

16.Mac Dock

CSS3模拟的mac操作系统菜单…

17.Drop-In Modals

18.滑动的唱片

该效果使用了CSS3过渡和些许HTML,在它上面放一个唱片专辑会看上去更生动。

您还可以参考以下CSS3相关文章:
5个CSS3技术实现设计增强
一起感受HTML5和CSS3的能量
提升你设计水平的CSS3新技术