{"id":13430000,"url":"https://github.com/you-dont-need/You-Dont-Need-Javascript","last_synced_at":"2025-03-16T05:30:27.172Z","repository":{"id":37271103,"uuid":"62615465","full_name":"you-dont-need/You-Dont-Need-JavaScript","owner":"you-dont-need","description":"CSS is powerful, you can do a lot of things without JS.","archived":false,"fork":false,"pushed_at":"2024-12-15T14:55:06.000Z","size":395712,"stargazers_count":20030,"open_issues_count":83,"forks_count":1385,"subscribers_count":330,"default_branch":"master","last_synced_at":"2025-03-11T02:09:26.578Z","etag":null,"topics":["accordion","burger-menu","carousel","counter","css","font","game","hacktoberfest","javascript","popover","textfield","tooltip","treeview"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/you-dont-need.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-05T07:30:42.000Z","updated_at":"2025-03-11T00:38:21.000Z","dependencies_parsed_at":"2022-07-12T05:18:29.235Z","dependency_job_id":"bcdace9c-797c-4dbc-87e2-bf3f0668ba78","html_url":"https://github.com/you-dont-need/You-Dont-Need-JavaScript","commit_stats":{"total_commits":392,"total_committers":135,"mean_commits":2.903703703703704,"dds":0.9464285714285714,"last_synced_commit":"28211beea54431827f3969d6c962b1a1df1062ac"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/you-dont-need%2FYou-Dont-Need-JavaScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/you-dont-need%2FYou-Dont-Need-JavaScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/you-dont-need%2FYou-Dont-Need-JavaScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/you-dont-need%2FYou-Dont-Need-JavaScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/you-dont-need","download_url":"https://codeload.github.com/you-dont-need/You-Dont-Need-JavaScript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830912,"owners_count":20354848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","burger-menu","carousel","counter","css","font","game","hacktoberfest","javascript","popover","textfield","tooltip","treeview"],"created_at":"2024-07-31T02:00:49.024Z","updated_at":"2025-03-16T05:30:22.159Z","avatar_url":"https://github.com/you-dont-need.png","language":"HTML","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"简体中文 | [English](./README.MD)\n\n# 你不需要 JavaScript\n[![加入 Spectrum 社区](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/you-dont-need/javascript)\n\n请注意，这些演示应该被认为是CSS的“概念证明”。从可访问性的角度来看，它们可能存在严重的问题(键盘导航、语音合成等)，或者渐进增强/降级/等等。\n\n\n### 风格指南：\n\n```markdown\n## Subject\n\n[\u003cimg src=\"images/image1.png\" height=\"230\" title=\"Demo 1\"\u003e](http://url-to-page)\n[\u003cimg src=\"images/image2.png\" height=\"230\" title=\"Demo 2\"\u003e](http://url-to-page)\n[\u003cimg src=\"images/image3.png\" height=\"230\" title=\"Demo 3\"\u003e](http://url-to-page)\n\n***\n\u0026nbsp;\n```\n\n***\n\u0026nbsp;\n\n## Quick links\n1. [手风琴 / 切换](#Accordion)\n1. [轮播](#Carousel)\n1. [复选框勾选计数](#Counter)\n1. [点击打开](#Flip)\n1. [深色模式/改變明暗](#DarkMode深色模式/改變明暗)\n1. [文本框上的浮动标签](#Floating)\n1. [字体(拉丁)](#Font)\n1. [悬停/弹出窗口信息](#Info)\n1. [图片库](#Image)\n1. [加载中](#Loaders)\n1. [菜单](#Menu)\n1. [菜单显示隐藏](#Mobile)\n1. [汉堡式菜单](#BurgerMenu)\n1. [花哨的菜单](#FancyMenu)\n1. [模态框/弹出](#Modal)\n1. [鼠标跟随](#Mouse)\n1. [视差滚动](#Parallax)\n1. [选项卡](#Tabs)\n1. [待办事项](#Todo)\n1. [工具提示](#Tooltips)\n1. [树状视图](#Treeview)\n1. [Twitter上的心动画](#Twitter)\n1. [动态图像着色](#ImageColorizing)\n1. [涟漪效应](#RippleEffect)\n1. [响应计数器 # 显示不适合屏幕的物品](#ResponsiveItemShowcase)\n1. [Neumorphism风格的卡片设计](#neumorphism-card-design)\n\n\n## \u003ca id=\"Accordion\"\u003e\u003c/a\u003e手风琴 / 切换\n\n[\u003cimg src=\"images/accordion.png\" height=\"230\" title=\"Demo 1\"\u003e](http://www.mraffaele.com/labs/css-only-accordions/)\n[\u003cimg src=\"images/toggler.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/cristina-silva/pen/pyXQrj)\n[\u003cimg src=\"images/toggler2.png\" height=\"230\" title=\"Demo 3\"\u003e](http://codepen.io/PaulZi/pen/zBbVvV)\n[\u003cimg src=\"images/accordion.gif\" height=\"230\" title=\"Demo 4\"\u003e](http://codepen.io/ekrof/pen/YqmXdQ)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Carousel\"\u003e\u003c/a\u003e轮播\n\n[\u003cimg src=\"images/slideshow2.png\" height=\"230\" title=\"Demo 1\"\u003e](http://codepen.io/SitePoint/pen/MyPVdK)\n[\u003cimg src=\"images/slideshow.png\" height=\"230\" title=\"Demo 2\"\u003e](https://codepen.io/cavico/pen/yOjwya)\n[\u003cimg src=\"images/slideshow3.png\" height=\"230\" title=\"Demo 3\"\u003e](https://codepen.io/FabianK/pen/zJLLrR)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Counter\"\u003e\u003c/a\u003e复选框勾选计数\n\n[\u003cimg src=\"images/checkedcounter.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/anon/pen/eZWXOZ)\n[\u003cimg src=\"images/checkedcounter2.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/lonekorean/pen/wKbzv)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Flip\"\u003e\u003c/a\u003e点击打开\n\n[\u003cimg src=\"images/flipper.png\" height=\"230\" title=\"Demo\"\u003e](https://codepen.io/RuudBurger/pen/bwjry)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"DarkMode\"\u003e\u003c/a\u003eDarkMode深色模式/改變明暗\n\n[\u003cimg src=\"images/darkmode.gif\" title=\"Dark Mode - Day and nigth\"\u003e](https://codepen.io/marcelesilv/pen/yLjrEzz)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Floating\"\u003e\u003c/a\u003e文本框上的浮动标签\n\n[\u003cimg src=\"images/textfields.png\" height=\"230\" title=\"Demo\"\u003e](http://codepen.io/KtorZ/pen/ZOzdqG)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Font\"\u003e\u003c/a\u003e字体(拉丁)\n\n[\u003cimg src=\"images/sansfont.png\" height=\"230\" title=\"Demo\"\u003e](https://yusugomori.com/projects/css-sans/fonts)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Info\"\u003e\u003c/a\u003e悬停/弹出窗口信息\n\n[\u003cimg src=\"images/tooltips.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/guuslieben/pen/gabQWM)\n[\u003cimg src=\"images/tooltips2.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/cristina-silva/pen/XXOpga)\n[\u003cimg src=\"images/info-on-hover.png\" height=\"230\" title=\"Demo 3\"\u003e](http://codepen.io/SitePoint/pen/akAmPw)\n[\u003cimg src=\"images/tooltips.gif\" height=\"230\" title=\"Demo 4\"\u003e](http://codepen.io/ekrof/pen/YqmXdQ)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Image\"\u003e\u003c/a\u003e图片库\n[\u003cimg src=\"images/gallery.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/shaishgandhi/pen/yJzamw)\n[\u003cimg src=\"images/gallery2.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/pavlovsk/pen/sjubp)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Loaders\"\u003e\u003c/a\u003eLoaders\n\n[\u003cimg src=\"images/loader.png\" height=\"230\" title=\"Demo 1\"\u003e](http://codepen.io/lucadem1313/pen/vKWqRV)\n[\u003cimg src=\"images/loader2.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/lucadem1313/pen/XKzLER)\n[\u003cimg src=\"images/loader3.png\" height=\"230\" title=\"Demo 3\"\u003e](http://codepen.io/brunjo/pen/xbwVXJ)\n[\u003cimg src=\"images/loader4.png\" height=\"230\" title=\"Demo 4\"\u003e](http://codepen.io/brunjo/pen/ByjRPy)\n[\u003cimg src=\"images/loader5.png\" height=\"230\" title=\"Demo 5\"\u003e](http://codepen.io/brunjo/pen/LEGyrJ)\n[\u003cimg src=\"images/loader6.png\" height=\"230\" title=\"Demo 6\"\u003e](http://codepen.io/brunjo/pen/bNEWjV)\n[\u003cimg src=\"images/loader7.png\" height=\"230\" title=\"Demo 7\"\u003e](http://codepen.io/brunjo/pen/wBKmbm)\n[\u003cimg src=\"images/loader8.png\" height=\"230\" title=\"Demo 8\"\u003e](http://tobiasahlin.com/spinkit/)\n[\u003cimg src=\"images/loader9.png\" height=\"230\" title=\"Demo 9\"\u003e](http://codepen.io/viduthalai1947/pen/JkhDK)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Menu\"\u003e\u003c/a\u003e菜单\n\n[\u003cimg src=\"images/menu2.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/antoniputra/pen/BzyWmb)\n[\u003cimg src=\"images/menu3.png\" height=\"230\" title=\"Demo 2\"\u003e](http://codepen.io/cristina-silva/pen/NNOodj)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Mobile\"\u003e\u003c/a\u003e菜单显示隐藏\n\n[\u003cimg src=\"images/menu.png\" height=\"230\" title=\"Demo\"\u003e](https://codepen.io/fabricionaweb/pen/xOLwxj)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"BurgerMenu\"\u003e\u003c/a\u003e汉堡式菜单\n\n[\u003cimg src=\"images/menu4.png\" height=\"230\" title=\"Demo\"\u003e](https://codepen.io/eduardoboucas/pen/BNyKwO)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"FancyMenu\"\u003e\u003c/a\u003e花哨的菜单\n\n[\u003cimg src=\"images/fancyMenu.gif\" height=\"230\" title=\"Demo\"\u003e](http://codepen.io/lbebber/pen/RNgBPP)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Modal\"\u003e\u003c/a\u003e模态框/弹出\n\n[\u003cimg src=\"images/modal2.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/peiche/pen/vhqym)\n[\u003cimg src=\"images/modal.png\" height=\"230\" title=\"Demo 2\"\u003e](https://codepen.io/chrisburnell/pen/scyKF)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Mouse\"\u003e\u003c/a\u003e鼠标跟随\n\n[\u003cimg src=\"images/mousetracking.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/Momciloo/pen/GoGRrQ)\n[\u003cimg src=\"images/mouse-tracking-2.gif\" height=\"230\" title=\"Demo 2\"\u003e](https://codepen.io/masterujjval/pen/xxmBRJV)\n\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Parallax\"\u003e\u003c/a\u003e视差滚动\n\n[\u003cimg src=\"images/parallax.png\" height=\"230\" title=\"Demo\"\u003e](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Tabs\"\u003e\u003c/a\u003e选项卡\n\n[\u003cimg src=\"images/tabs.png\" height=\"230\" title=\"Demo 1\"\u003e](https://codepen.io/llgruff/pen/ZGBxOa)\n[\u003cimg src=\"images/tabs2.png\" height=\"230\" title=\"Demo 2\"\u003e](https://codepen.io/fusco/pen/Wvzjrm)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Todo\"\u003e\u003c/a\u003e待办事项\n[\u003cimg src=\"images/todo.png\" height=\"230\" title=\"Demo\"\u003e](http://codepen.io/scryptonite/pen/oLGzdj)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Tooltips\"\u003e\u003c/a\u003e工具提示\n+ [Demo](https://kushagragour.in/lab/hint/)\n\n## \u003ca id=\"Treeview\"\u003e\u003c/a\u003e树状视图\n\n[\u003cimg src=\"images/tree.png\" height=\"230\" title=\"Demo\"\u003e](https://codepen.io/rgg/pen/WrKyzj)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"Twitter\"\u003e\u003c/a\u003eTwitter上的心动画\n\n[\u003cimg src=\"images/art_twitter_heart_animation.gif\" height=\"230\" title=\"Demo\"\u003e](http://codepen.io/thebabydino/pen/RRRRZE)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"ImageColorizing\"\u003e\u003c/a\u003e动态图像着色\n\n[\u003cimg src=\"images/imagecolorizing.png\" height=\"230\" title=\"Demo\"\u003e](http://codepen.io/noahblon/pen/ZbjmbK)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"RippleEffect\"\u003e\u003c/a\u003e涟漪效应\n\n[\u003cimg src=\"images/ripple-effect.gif\" height=\"230\" title=\"Ripple EffectDemo\"\u003e](http://mladenplavsic.github.io/css-ripple-effect/)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"ResponsiveItemShowcase\"\u003e\u003c/a\u003e响应计数器 # 显示不适合屏幕的物品\n\n[\u003cimg src=\"images/responsive-item-showcase.gif\" title=\"Responsive Item Showcase\"\u003e](https://codepen.io/pavlovsk/pen/QqrZzv/right/)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## \u003ca id=\"NeumorphismCardDesign\"\u003e\u003c/a\u003eNeumorphism风格的卡片设计\n\n[\u003cimg src=\"images/neumorphism-card-design.gif\" title=\"Neumorphism Card Design\"\u003e](https://codepen.io/saviomartin/pen/LYNgqKW)\n\n**[⬆ 回到顶部](#quick-links)**\n\n***\n\u0026nbsp;\n\n## 贡献\n\n欢迎你为这个项目做出贡献。现在给我们发送一个PR(合并请求)吧!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyou-dont-need%2FYou-Dont-Need-Javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyou-dont-need%2FYou-Dont-Need-Javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyou-dont-need%2FYou-Dont-Need-Javascript/lists"}