zoukankan      html  css  js  c++  java
  • 47个惊人的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

  • 相关阅读:
    简单的Servlet结合Jsp实现请求和响应以及对doGet和doPost的浅析
    My1stServlet
    Myeclipse发布第一个jsp页面及web project部署到tomcat上的几种方法
    java中循环的不同终止方式
    Mybatis学习笔记
    python 进程间的数据交互
    python 进程
    python 队列
    python 多线程
    python paramiko 向linux执行命令和发送接收文件
  • 原文地址:https://www.cnblogs.com/chu888chu888/p/2357133.html
Copyright © 2011-2022 走看看