you-dont-need /You-Dont-Need-JavaScript

CSS is powerful, you can do a lot of things without JS.

★ 20,577⑂ 1,491
HTMLCreated 2016-07-05
20,577
stars
+6+5+-2
1,491
forks
–
watchers
–
prs
–
issues
–
releases
–
discussions

README

简体中文 | English

 你不需要 JavaScript


请注意,这些演示应该被认为是CSS的“概念证明”。从可访问性的角度来看,它们可能存在严重的问题(键盘导航、语音合成等),或者渐进增强/降级/等等。


 风格指南:

markdown
 Subject






 



 

 Quick links
1. 手风琴 / 切换
1. 轮播
1. 复选框勾选计数
1. 点击打开
1. 深色模式/改變明暗
1. 文本框上的浮动标签
1. 字体(拉丁)
1. 悬停/弹出窗口信息
1. 图片库
1. 加载中
1. 菜单
1. 菜单显示隐藏
1. 汉堡式菜单
1. 花哨的菜单
1. 模态框/弹出
1. 鼠标跟随
1. 视差滚动
1. 选项卡
1. 待办事项
1. 工具提示
1. 树状视图
1. Twitter上的心动画
1. 动态图像着色
1. 涟漪效应
1. 响应计数器  显示不适合屏幕的物品
1. Neumorphism风格的卡片设计
1. 尤達寶寶動畫


 手风琴 / 切换






⬆ 回到顶部


 

 轮播





⬆ 回到顶部


 

 复选框勾选计数




⬆ 回到顶部


 

 点击打开



⬆ 回到顶部


 

 DarkMode深色模式/改變明暗



⬆ 回到顶部


 

 文本框上的浮动标签



⬆ 回到顶部


 

 字体(拉丁)



⬆ 回到顶部


 

 悬停/弹出窗口信息






⬆ 回到顶部


 

 图片库



⬆ 回到顶部


 

 Loaders












⬆ 回到顶部


 

 菜单




⬆ 回到顶部


 

 菜单显示隐藏



⬆ 回到顶部


 

 汉堡式菜单



⬆ 回到顶部


 

 花哨的菜单



⬆ 回到顶部


 

 模态框/弹出




⬆ 回到顶部


 

 鼠标跟随





⬆ 回到顶部


 

 视差滚动



⬆ 回到顶部


 

 选项卡




⬆ 回到顶部


 

 待办事项


⬆ 回到顶部


 

 工具提示
+ Demo

 树状视图



⬆ 回到顶部


 

 Twitter上的心动画



⬆ 回到顶部


 

 动态图像着色



⬆ 回到顶部


 

 涟漪效应



⬆ 回到顶部


 

 响应计数器  显示不适合屏幕的物品



⬆ 回到顶部


 

 Neumorphism风格的卡片设计



⬆ 回到顶部


 

 尤達寶寶動畫 CSS



⬆ 回到顶部

---

 

 贡献

欢迎你为这个项目做出贡献。现在给我们发送一个PR(合并请求)吧!

Snapshot: 2026-11-10T09:35:25Z · Data license Apache-2.0 · JSON