47个惊人的CSS3动画演示

翻译自:47 Amazing CSS3 Animation Demos
中文原文:47个惊人的CSS3动画演示
请尊重版权,转载请注明来源,多谢!


或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。

1.使用jQuery的CSS3时钟

2.模拟时钟

3.使用方向键旋转的3D盒子

4.多个3D盒子(滑入/滑出)

5. CSS3折叠

6. 自动滚动的视差

7. Isocube

8. 图片画廊

9. 矩阵

10. 7个使用CSS3的Javascript效果替代

11. 图片滑过效果

12. 转动的可乐罐 (通过滚动条控制)

PS:这个例子和下面这个严格来说都不是用的CSS3技术,而是复杂的图片和css的background-position属性的应用。

13. 3D 房间

14. 宝利来画廊

15. 太空

注意: 这个演示依赖图形,需要一些时间来加载,但是结果非常疯狂!

16. Mac Dock

17. 滑入的模态窗口

18. 滑动的唱片

19. 放大的宝利来画廊

20. 动画的火箭

21. Poster Circle

这个需要支持3D动画的浏览器才能看到全部效果,比如Mac版Safari4浏览器

22. 变形的盒子

23. 落叶

24. 动画效果宝利来画廊

25. 聚光灯投影

26. 彩色时钟

27. Lightbox 画廊(可拖拽)

28. 弹性所略图菜单

29. Coverflow

30. 雪花

31. jQuery DJ Hero

32. 动态的堆叠卡

33. 另一个图片画廊

34. 雪栈 (用方向键控制)

35. 动画的定价分组

36. 光滑的jQuery菜单

37. CSS3

38. 不用Javascript的CSS Tabs

39. 无JavaScript的Tab菜单

40. SVG Fisheye菜单

41. 无Flash的动态演示

42. 旋转的画廊

43. 下拉菜单

44. 另一个Fisheye效果

45. 逐帧动画(鼠标经过时演示)

46. 另一个CSS3折叠

47. AT-AT Walker (没有用Flash或JavaScript)

时间: 2024-10-15 08:29:37

47个惊人的CSS3动画演示的相关文章

47 个 惊人的 CSS3 动画示例

本文介绍47个令人咋舌的CSS3动画演示汇编.他们展示了CSS3的转换和过渡性的处理.有些是非常有用的,可以作为浏览器的替代品使用.这些效果大多是简单的,看起来很酷.为了尝试这些效果,你需要的WebKit浏览器,如Safari和Chrome. CSS3 Clock With jQuery Analogue Clock 3D Cube That Rotates Using Arrow Keys Multiple 3D Cubes (Slide In/Out) CSS3 Accordion Auto

CSS3动画理解与应用

Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束. Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞.   Transition与Animation: transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果

闲谈CSS3动画

随着CSS3越来越热,CSS3动画也逐渐受到大家的关注.这次有幸修改淘宝网全站页头,小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果).与其说是渐进增强,不如说是满足了技术人小小的虚荣心. 以下是自己的一点理解,希望能对大家有所帮助. - 淘宝案例解析 需求:鼠标移动到菜单上时旋转箭头,且给支持CSS3的浏览器加上旋转动画. 源码请查看demo源文件. demo (http://fiddle.jshell.net/pjRVT/show/light/) -

CSS3 动画实现方法大全(*****************************星级文章*************************)

CSS3 动画实现方法大全 :http://www.100sucai.com/css3/1.html 看最下面: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS3动画实现方式大全</title> <script src="jquery-2.1.0.min.js">

Bootstrap轮播加上css3动画,炫酷到底!_javascript技巧

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件.介绍Animate.css 为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css. Dan Eden写的. 这是让我能专注于手头的任务,而不是解释CSS3动画的代码. 用Animate.css 需要2个步骤: 在html文档中引入animate.min.css.

动画演示:Excel表格样式的套用与创建

Excel2007及以上版本提供了许多漂亮的预定义表格样式,我们可以为数据表轻松快速地套用格式.如果预定义的表样式不能满足需要,还可以创建并应用自定义的表格样式. 下面我们用简要文字和动画演示的方式来介绍Excel表格样式的套用.设置以及自定义的具体方法. 套用现成表格样式 应用表格样式方法如下. 1.在工作表中选择需要设置样式的单元格. 2.在"开始"选项卡上的"样式"组中,单击"套用表格式". 3.在弹出的样式列表中选择需要的表格样式. 4.

animation CSS3动画总结

最近一个小游戏项目用到了CSS3的动画属性,例如transition.transform.animation.经过三个星期,终于做完了,利用周末好好梳理总结一下. keyframes这个属性用来定义一系列关键帧.也就是在动画运行的全过程中的一个个中间点. Internet Explorer 10.Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性. Chrome 和 Safari 需要前缀 -webkit-. animation的属性 animatio

CSS实例:老外收集的CSS3动画效果

文章简介:animate.css 一些常用的CSS3动画效果. 大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css

动画演示:PS轻松绘制美丽彩虹

动画演示 很多人对彩虹的制作很感兴趣,咱们就来看看用Photoshop怎么做出绚烂的彩虹特效,主要会用到径向渐变.这里作者采用动画的方式做演示,非常直观方便. 1.首先在Phtoshop中新建一个文件,然后按住ALT并双击背景层,使背景层变成普通层(相信大家都能知道个快捷键). 点选渐变,并打开渐变编辑器,选择色谱渐变,并做如图拉选渐变条. 2.弄好第一步后,在工具选项栏上选择径向渐变,如图. 3.然后,按住SHIFT键在画布上拉选. 4.拉出来啦!有时可能拉出的效果不好,可以多试几次....并