Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (7 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)