https://github.com/Zhangjd/awesome-pure-css-no-javascript

:scroll: A curated list of awesome pure CSS resources.
https://github.com/Zhangjd/awesome-pure-css-no-javascript

List: awesome-pure-css-no-javascript

Last synced: 7 days ago
JSON representation

:scroll: A curated list of awesome pure CSS resources.

• Host: GitHub
• URL: https://github.com/Zhangjd/awesome-pure-css-no-javascript
• Owner: Zhangjd
• Created: 2016-03-16T05:13:10.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-04-30T09:27:05.000Z (over 8 years ago)
• Last Synced: 2024-05-23T04:10:59.809Z (6 months ago)
• Homepage:
• Size: 9.77 KB
• Stars: 238
• Watchers: 10
• Forks: 34
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-lists - awesome-pure-css-no-javascript
• awesomelist - awesome-pure-css-no-javascript
• collection - awesome-pure-css-no-javascript
• lists - awesome-pure-css-no-javascript

README

        
# awesome-pure-css-no-javascript

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

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

* **Resources**

    * [基于单个 Div 的 CSS 绘图](http://zhuanlan.zhihu.com/FrontendMagazine/19854868)

    * [A Pure CSS3 Cycling Slideshow](https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/) 纯 CSS 编写出可自动循环播放的 Slideshow。

    * [用 HTML 和 CSS 来打造一个自己的「大白(●—●)」](http://www.jianshu.com/p/6d3feca2b5f7)

    * [使用 CSS3 画出一个叮当猫](http://www.cnblogs.com/jr1993/p/4448025.html)

* **Libraries**

    * [loaders.css](https://github.com/ConnorAtherton/loaders.css) 纯 CSS 实现的加载动画框架。

    * [balloon.css](https://github.com/kazzkiq/balloon.css) 纯 CSS 实现的弹出层效果。

    * [pure](https://github.com/yahoo/pure) Yahoo 出品的纯 CSS 框架，体积小巧。

    * [icono](https://github.com/saeedalipoor/icono) 仅一个标签实现的纯 CSS 图标库。

    * [iHover](https://github.com/gudh/ihover) 一个令人印象深刻的图片悬停效果集合，完全基于 CSS3 实现。

    * [devices.css](https://github.com/marvelapp/devices.css) 纯 CSS 模拟移动设备

    * [CSS Modals](https://github.com/drublic/css-modal) 纯 CSS 实现模态框

    * [Animate.css](http://daneden.github.io/animate.css/) CSS3 动效库

* **Tools**

    * [image2css](https://github.com/jaysalvat/image2css) 使用 PHP GD 库把图像转换成 CSS box-shadow 属性。例子可参考 [Mona Lisa with pure CSS](http://codepen.io/jaysalvat/pen/HaqBf)。

    * [img2css](https://github.com/javierbyte/img2css) 功能和上面一个相似，不过这个库借助的是 canvas。

    * [Clippy](http://bennettfeely.com/clippy/) 一个在线生成工具，主要用来实现 CSS 背景剪切功能（可查看CSS clip属性详解）。

    * [Bounce.js](http://bouncejs.com/) 生成 CSS3 动效的小工具，它是用JavaScript编写的，提供了一个 Web 编辑界面

    * [CSS Animate](http://cssanimate.com/) 如果你觉得上面的工具还无法做出你想要的动效，那么可以看看CSS Animate这个工具。它能让你设置更多的动效参数，比如你可以同时设置动效起始和终止状态的坐标，大小，以及透明度，这样你就能够做出更加复杂的动效来。

* **Demos**

    * [30个CSS碎片拼图，30种濒临灭绝动物](http://www.webhek.com/misc-res/species-in-pieces/#)

    * [Airplane (Pure CSS)](http://codepen.io/dogagenc/pen/xbRKZx)

    * [CSS Faces](http://codepen.io/rachel_web/pen/doaPWN)

    * [A Single Div : a CSS drawing project by Lynn Fisher](http://a.singlediv.com/)

    * [Pure CSS Tic-tac-toe 游戏](https://codepen.io/ziga-miklic/pen/Fagmh)

    * [Pure CSS 扫雷游戏](https://github.com/imsun/CSS-Minesweeper)

    * [星球大战里面的 Darth Vader](https://tsitu.github.io/darth.html)

    * [Simpsons In CSS](http://pattle.github.io/simpsons-in-css/)

    * [Silon](https://github.com/SLaks/Silon)

    * [Rotate Clock](http://codepen.io/DawidKrajewski/pen/dPpMXN)