开发者社区> 楚广明> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

47个惊人的CSS3动画演示

简介: 翻译自:47 Amazing CSS3 Animation Demos中文原文:47个惊人的CSS3动画演示请尊重版权,转载请注明来源,多谢! 或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧。
+关注继续查看
翻译自:47 Amazing CSS3 Animation Demos
中文原文:47个惊人的CSS3动画演示
请尊重版权,转载请注明来源,多谢!

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

1.使用jQuery的CSS3时钟

css3 clock

2.模拟时钟

analogue clock

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

3d cube

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

multiple 3d cubes

5. CSS3折叠

css3 clock

6. 自动滚动的视差

auto scrolling parallax

7. Isocube

isocube

8. 图片画廊

image gallery

9. 矩阵

matrix

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

javascript effect alternatives

11. 图片滑过效果

css3 clock

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

coke can

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

13. 3D 房间

3d meninas

14. 宝利来画廊

polaroid gallery

15. 太空

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

space

16. Mac Dock

css3 clock

17. 滑入的模态窗口

drop in modals

18. 滑动的唱片

sliding vinyl

19. 放大的宝利来画廊

zooming polaroids

20. 动画的火箭

animated rocket

21. Poster Circle

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

22. 变形的盒子

morphing cubes

23. 落叶

falling leaves

24. 动画效果宝利来画廊

polaroid gallery

25. 聚光灯投影

spotlight cast shadow

26. 彩色时钟

colorful clock

27. Lightbox 画廊(可拖拽)

css3 clock

28. 弹性所略图菜单

elastic thumbnail menu

29. Coverflow

coverflow

30. 雪花

snow

31. jQuery DJ Hero

dj hero

32. 动态的堆叠卡

stacking cards

33. 另一个图片画廊

image gallery

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

snow stack

35. 动画的定价分组

animated pricing column

36. 光滑的jQuery菜单

slick jquery menu

37. CSS3

sticky notes

38. 不用Javascript的CSS Tabs

css tabs

39. 无JavaScript的Tab菜单

tab menus

40. SVG Fisheye菜单

fisheye menu

41. 无Flash的动态演示

dynamic presentation

42. 旋转的画廊

rotating gallery

43. 下拉菜单

dropdown menu

44. 另一个Fisheye效果

fisheye

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

css3 animation

46. 另一个CSS3折叠

another accordion

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

css3 animation walker

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端面试知识题】- 3. HTML && CSS
它是Web应用程序的传输协议,提供了双向的、按序到达的数据流。它是HTML5新増的协议, WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
+关注
楚广明
10年导入咨询顾问经验,敏捷中国 第一届中国高峰会讲员,行业实施:中国移动、中华联合保险、中国民航信息 ANZ 澳新银行、戴姆勒奔驰汽车、广州证券、浦发银行、爱德万测试、蔚来汽车、清华大学、努比亚、顺丰速运、迅雷、时趣互动......等企业 Atlassian 敏捷项目
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载