[CSS3]制作50个超棒动画效果教程

简介:

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如SafariChrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)
 

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

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

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

2.模拟时钟

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

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

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

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

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

5.CSS3手风琴效果

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

6.自动滚动视差效果

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

7.Isocube

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

8.CSS3图片集

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

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

10.7种CSS3结合javascript技术的特效

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

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

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

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

CSS3实例

13.3D 《宫女》

CSS3实例

14.宝利来画廊

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

15.太空

CSS3实例

16.Mac Dock

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

17.Drop-In Modals

CSS3实例

18.滑动的唱片

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

19.CSS3 Zooming Polaroids

  该效果会将一个照片列表按顺序排列,并把它们按不同的角度旋转,使用了CSS2和CSS3技术,无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。
CSS3 Zooming Polaroids

20.CSS3 火箭动画

CSS3 火箭动画

21.Poster Circle

CSS3实例

22.变形的立方体

CSS3实例

23.动画版宝丽来画廊

CSS3实例

24.聚光灯下的投影效果

CSS3实例

25.色彩鲜艳的时钟

CSS3实例

26.Lightbox Gallery

CSS3实例

27.弹性缩略图菜单

弹性缩略图菜单

28.Coverflow

CSS3实例

29.jQuery DJ Hero

jQuery DJ Hero

30.Dynamic Stacking Cards

CSS3实例

31.另一个CSS3图片画廊效果

32.雪堆(使用方向键控制)

CSS3实例

33.CSS3动画版价格栏

CSS3动画版价格栏

34.平滑jQuery+CSS3菜单

平滑jQuery+CSS3菜单

35.CSS标签(无JavaScript)

CSS标签(无JavaScript)

36.CSS标签菜单(无JavaScript)

CSS标签菜单(无JavaScript)

37.SVG+CSS3鱼眼菜单

VG+CSS3鱼眼菜单

38.CSS3落叶效果

CSS3落叶效果

39.CSS3旋转图集效果

CSS3旋转图集效果

40.CSS3下拉菜单

CSS3下拉菜单

41.星球大战风格爬行文字(纯HTML+CSS)

星球大战风格爬行文字(纯HTML+CSS)

42.CSS3即时贴

CSS3即时贴

43.css3雪花

css3雪花

44.又一个鱼眼效果

CSS3实例

45.CSS3逐帧动画

  第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片,当播放到最后一帧时它会自动播放第一帧,如此循环,但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动,依旧是mousemove这个动作,只要鼠标在移动图片动画就会持续播放,但动画的播放速度是与你的鼠标移动速度有关的,该实例支持Safari, Google Chrome, IE8, Firefox 和 Opera。
CSS3逐帧动画

46.全地域装甲载具

CSS3实例

47.又一个CSS3手风琴效果

又一个CSS3手风琴效果

48.无Flash版动态展示

CSS3实例

49.平滑菜单栏

平滑菜单栏

50.loading旋转效果

loading旋转效果

 

英文原文:50 Awesome Animations made with CSS3
翻译原文:用CSS3制作50个超棒动画效果教程(彬Go)


本文转自Justin博客园博客,原文链接:http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html,如需转载请自行联系原作者

相关文章
|
4月前
|
自然语言处理 前端开发 JavaScript
用 通义灵码 一键生成“水波纹按钮”,连 CSS 动画都不用自己写了!
通义灵码是一款智能编程辅助工具,它可以根据自然语言指令自动生成高质量的代码。例如,只需输入“生成一个按钮,点击时带水波纹动画,模拟 Material Ripple 效果”,它就能生成具备完整交互逻辑、CSS 动画和良好性能的按钮组件。不仅如此,它还支持拓展功能,如长按触发提示、添加图标等,并能自动优化样式适配不同场景。通过通义灵码,开发者可以大幅提升效率,专注于创意实现,而不必纠结于繁琐的代码细节。
|
9月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
488 143
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
170 1
|
10月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
207 34
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
368 63
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
654 58
|
10月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
171 22
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
340 58
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
203 31