简体中文 | [English](./README.md)
# 你不需要 JavaScript
[](https://spectrum.chat/you-dont-need/javascript)
请注意，这些演示应该被认为是CSS的“概念证明”。从可访问性的角度来看，它们可能存在严重的问题(键盘导航、语音合成等)，或者渐进增强/降级/等等。
### 风格指南：
```markdown
## Subject
[
](http://url-to-page)
[
](http://url-to-page)
[
](http://url-to-page)
***
```
***
## Quick links
1. [手风琴 / 切换](#Accordion)
1. [轮播](#Carousel)
1. [复选框勾选计数](#Counter)
1. [点击打开](#Flip)
1. [深色模式/改變明暗](#DarkMode深色模式/改變明暗)
1. [文本框上的浮动标签](#Floating)
1. [字体(拉丁)](#Font)
1. [悬停/弹出窗口信息](#Info)
1. [图片库](#Image)
1. [加载中](#Loaders)
1. [菜单](#Menu)
1. [菜单显示隐藏](#Mobile)
1. [汉堡式菜单](#BurgerMenu)
1. [花哨的菜单](#FancyMenu)
1. [模态框/弹出](#Modal)
1. [鼠标跟随](#Mouse)
1. [视差滚动](#Parallax)
1. [选项卡](#Tabs)
1. [待办事项](#Todo)
1. [工具提示](#Tooltips)
1. [树状视图](#Treeview)
1. [Twitter上的心动画](#Twitter)
1. [动态图像着色](#ImageColorizing)
1. [涟漪效应](#RippleEffect)
1. [响应计数器 # 显示不适合屏幕的物品](#ResponsiveItemShowcase)
1. [Neumorphism风格的卡片设计](#neumorphism-card-design)
1. [尤達寶寶動畫](#baby-yoda-animation-css)
## 手风琴 / 切换
[
](http://www.mraffaele.com/labs/css-only-accordions/)
[
](http://codepen.io/cristina-silva/pen/pyXQrj)
[
](http://codepen.io/PaulZi/pen/zBbVvV)
[
](http://codepen.io/ekrof/pen/YqmXdQ)
**[⬆ 回到顶部](#quick-links)**
***
## 轮播
[
](http://codepen.io/SitePoint/pen/MyPVdK)
[
](https://codepen.io/cavico/pen/yOjwya)
[
](https://codepen.io/FabianK/pen/zJLLrR)
**[⬆ 回到顶部](#quick-links)**
***
## 复选框勾选计数
[
](https://codepen.io/anon/pen/eZWXOZ)
[
](http://codepen.io/lonekorean/pen/wKbzv)
**[⬆ 回到顶部](#quick-links)**
***
## 点击打开
[
](https://codepen.io/RuudBurger/pen/bwjry)
**[⬆ 回到顶部](#quick-links)**
***
## DarkMode深色模式/改變明暗
[
](https://codepen.io/marcelesilv/pen/yLjrEzz)
**[⬆ 回到顶部](#quick-links)**
***
## 文本框上的浮动标签
[
](http://codepen.io/KtorZ/pen/ZOzdqG)
**[⬆ 回到顶部](#quick-links)**
***
## 字体(拉丁)
[
](https://yusugomori.com/projects/css-sans/fonts)
**[⬆ 回到顶部](#quick-links)**
***
## 悬停/弹出窗口信息
[
](https://codepen.io/guuslieben/pen/gabQWM)
[
](http://codepen.io/cristina-silva/pen/XXOpga)
[
](http://codepen.io/SitePoint/pen/akAmPw)
[
](http://codepen.io/ekrof/pen/YqmXdQ)
**[⬆ 回到顶部](#quick-links)**
***
## 图片库
[
](https://codepen.io/shaishgandhi/pen/yJzamw)
[
](http://codepen.io/pavlovsk/pen/sjubp)
**[⬆ 回到顶部](#quick-links)**
***
## Loaders
[
](http://codepen.io/lucadem1313/pen/vKWqRV)
[
](http://codepen.io/lucadem1313/pen/XKzLER)
[
](http://codepen.io/brunjo/pen/xbwVXJ)
[
](http://codepen.io/brunjo/pen/ByjRPy)
[
](http://codepen.io/brunjo/pen/LEGyrJ)
[
](http://codepen.io/brunjo/pen/bNEWjV)
[
](http://codepen.io/brunjo/pen/wBKmbm)
[
](http://tobiasahlin.com/spinkit/)
[
](http://codepen.io/viduthalai1947/pen/JkhDK)
[
](https://codepen.io/rcjasub/pen/zxrddOP)
**[⬆ 回到顶部](#quick-links)**
***
## 菜单
[
](https://codepen.io/antoniputra/pen/BzyWmb)
[
](http://codepen.io/cristina-silva/pen/NNOodj)
**[⬆ 回到顶部](#quick-links)**
***
## 菜单显示隐藏
[
](https://codepen.io/fabricionaweb/pen/xOLwxj)
**[⬆ 回到顶部](#quick-links)**
***
## 汉堡式菜单
[
](https://codepen.io/eduardoboucas/pen/BNyKwO)
**[⬆ 回到顶部](#quick-links)**
***
## 花哨的菜单
[
](http://codepen.io/lbebber/pen/RNgBPP)
**[⬆ 回到顶部](#quick-links)**
***
## 模态框/弹出
[
](https://codepen.io/peiche/pen/vhqym)
[
](https://codepen.io/chrisburnell/pen/scyKF)
**[⬆ 回到顶部](#quick-links)**
***
## 鼠标跟随
[
](https://codepen.io/Momciloo/pen/GoGRrQ)
[
](https://codepen.io/masterujjval/pen/xxmBRJV)
**[⬆ 回到顶部](#quick-links)**
***
## 视差滚动
[
](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)
**[⬆ 回到顶部](#quick-links)**
***
## 选项卡
[
](https://codepen.io/llgruff/pen/ZGBxOa)
[
](https://codepen.io/fusco/pen/Wvzjrm)
**[⬆ 回到顶部](#quick-links)**
***
## 待办事项
[
](http://codepen.io/scryptonite/pen/oLGzdj)
**[⬆ 回到顶部](#quick-links)**
***
## 工具提示
+ [Demo](https://kushagragour.in/lab/hint/)
## 树状视图
[
](https://codepen.io/rgg/pen/WrKyzj)
**[⬆ 回到顶部](#quick-links)**
***
## Twitter上的心动画
[
](http://codepen.io/thebabydino/pen/RRRRZE)
**[⬆ 回到顶部](#quick-links)**
***
## 动态图像着色
[
](http://codepen.io/noahblon/pen/ZbjmbK)
**[⬆ 回到顶部](#quick-links)**
***
## 涟漪效应
[
](http://mladenplavsic.github.io/css-ripple-effect/)
**[⬆ 回到顶部](#quick-links)**
***
## 响应计数器 # 显示不适合屏幕的物品
[
](https://codepen.io/pavlovsk/pen/QqrZzv/right/)
**[⬆ 回到顶部](#quick-links)**
***
## Neumorphism风格的卡片设计
[
](https://codepen.io/saviomartin/pen/LYNgqKW)
**[⬆ 回到顶部](#quick-links)**
***
## 尤達寶寶動畫 CSS
[
](https://codepen.io/marcelesilv/pen/qBeaOaw)
**[⬆ 回到顶部](#quick-links)**
---
## 贡献
欢迎你为这个项目做出贡献。现在给我们发送一个PR(合并请求)吧!