HTML5技术

用CSS3制作50个超棒动画效果教程 - 2778085001

字号+ 作者:H5之家 来源:博客园 2016-07-15 10:00 我要评论( )

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

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

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实现的手风琴菜单效果,基于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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3 选择器 - Glunefish

    CSS3 选择器 - Glunefish

    2017-04-22 09:00

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

  • 【CSS3】精美横向滚动菜单按钮 - Glunefish

    【CSS3】精美横向滚动菜单按钮 - Glunefish

    2017-04-14 14:00

  • 【CSS3动画】下拉菜单模拟 - Glunefish

    【CSS3动画】下拉菜单模拟 - Glunefish

    2017-04-12 13:00

网友点评
c