Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/you-dont-need/You-Dont-Need-Javascript

CSS is powerful, you can do a lot of things without JS.
https://github.com/you-dont-need/You-Dont-Need-Javascript

accordion burger-menu carousel counter css font game hacktoberfest javascript popover textfield tooltip treeview

Last synced: 8 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/you-dont-need/You-Dont-Need-Javascript
Owner: you-dont-need
License: gpl-3.0
Created: 2016-07-05T07:30:42.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2024-10-25T10:22:09.000Z (9 days ago)
Last Synced: 2024-10-26T18:28:59.104Z (8 days ago)
Topics: accordion, burger-menu, carousel, counter, css, font, game, hacktoberfest, javascript, popover, textfield, tooltip, treeview
Language: HTML
Homepage:
Size: 328 MB
Stars: 19,161
Watchers: 327
Forks: 1,329
Open Issues: 64
Metadata Files:
- Readme: README-zh_CN.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        简体中文 | [English](./README.MD)

# 你不需要 JavaScript

[![加入 Spectrum 社区](https://withspectrum.github.io/badge/badge.svg)](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)

## 手风琴 / 切换

[](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)

**[⬆ 回到顶部](#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)**

***

 

## 贡献

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