Awesome

awesome-pure-css-no-javascript

纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果?

这里收集整理了一些相关资源与工具，欢迎各位补充。

• Resources
  • 基于单个 Div 的 CSS 绘图
  • A Pure CSS3 Cycling Slideshow 纯 CSS 编写出可自动循环播放的 Slideshow。
  • 用 HTML 和 CSS 来打造一个自己的「大白(●—●)」
  • 使用 CSS3 画出一个叮当猫
• Libraries
  • loaders.css 纯 CSS 实现的加载动画框架。
  • balloon.css 纯 CSS 实现的弹出层效果。
  • pure Yahoo 出品的纯 CSS 框架，体积小巧。
  • icono 仅一个标签实现的纯 CSS 图标库。
  • iHover 一个令人印象深刻的图片悬停效果集合，完全基于 CSS3 实现。
  • devices.css 纯 CSS 模拟移动设备
  • CSS Modals 纯 CSS 实现模态框
  • Animate.css CSS3 动效库
• Tools
  • image2css 使用 PHP GD 库把图像转换成 CSS box-shadow 属性。例子可参考 Mona Lisa with pure CSS。
  • img2css 功能和上面一个相似，不过这个库借助的是 canvas。
  • Clippy 一个在线生成工具，主要用来实现 CSS 背景剪切功能（可查看CSS clip属性详解）。
  • Bounce.js 生成 CSS3 动效的小工具，它是用JavaScript编写的，提供了一个 Web 编辑界面
  • CSS Animate 如果你觉得上面的工具还无法做出你想要的动效，那么可以看看CSS Animate这个工具。它能让你设置更多的动效参数，比如你可以同时设置动效起始和终止状态的坐标，大小，以及透明度，这样你就能够做出更加复杂的动效来。
• Demos
  • 30个CSS碎片拼图，30种濒临灭绝动物
  • Airplane (Pure CSS)
  • CSS Faces
  • A Single Div : a CSS drawing project by Lynn Fisher
  • Pure CSS Tic-tac-toe 游戏
  • Pure CSS 扫雷游戏
  • 星球大战里面的 Darth Vader
  • Simpsons In CSS
  • Silon
  • Rotate Clock