50个经典 HTML+CSS 案例

序号	案例名称	详细介绍
01	Expanding Cards	卡片宽度动态变化效果，可以具体展示不同产品效果图，点击切换大图
02	Progress Steps	CSS 实现的进度条，用于填写表单，或者表示某个固定节点进度的功能
03	Rotating Navigation Animation	旋转导航动画效果（适用于博客单页面），效果比较夸张
04	Hidden Search Widget	隐藏的搜索组件，点击展开，再次点击取消。用于空间不大的搜索环境
05	Blurry Loading	模糊加载效果，页面加载时，背景图片会逐渐清晰，直到加载完成
06	Scroll Animation	滚动动画效果，页面加载时，元素会逐渐从左右两侧出现或消失，增加页面的动态感，用于网页首页滚动展示很多信息的效果
07	Split Landing Page	分割式着陆页，左侧是图片，右侧是图片，鼠标经过某个区域放大某个产品，类似demo01效果
08	Form Wave	表单输入波浪效果，鼠标经过输入框时，Label 会有波浪效果，增加用户体验，比较俏皮的场景
09	Sound Board	声音按钮或者Tab，点击按钮播放对应的音效，适用于游戏、娱乐等场景
10	Dad Jokes	笑话生成器，点击按钮获取一个随机笑话(请求服务器)，适用于娱乐等场景
11	Event Keycodes	键盘事件代码 JS，按下键盘时，显示对应的键值和代码，适用于快捷键
12	Faq Collapse	常见问题折叠效果，点击问题展开或收起答案，适用于FAQ页面
13	Random Choice Picker	随机选择器，输入选项，点击按钮随机选择一个选项，适用于抽奖场景
14	Animated Navigation	动画导航效果，用户展开折叠导航时，导航会有动画效果，增加用户体验
15	Incrementing Counter	递增计数器，用来展示较大数据（有很大用户使用量），或者快速变动的数据（股票价格等）
16	Drink Water	喝水小游戏，模拟多个杯子倒水，看什么时候可以倒满
17	Movie App	电影应用，展示电影列表，点击查看详情，适用于电影等场景（请求开源接口）
18	Background Slider	背景轮播效果，鼠标经过时，背景图片会轮播切换，适用于展示多个产品或图片的场景，图片预览效果
19	Theme Clock	主题时钟，展示当前时间，支持切换主题（白天主题或者暗色主题），适用于个人网站或博客（transform 动画效果实现）
20	Button Ripple Effect	按钮波纹效果，点击按钮时，按钮会有波纹效果，增加用户体验
21	Drag N Drop	拖拽效果，用户可以拖拽元素到指定区域，适用于拖拽排序、拖拽上传等场景
22	Drawing App	绘图应用，用户可以在画布上绘制图形，支持多种颜色和线条粗细，适用于在线绘图、涂鸦、数字签名，也可以下载图片
23	Kinetic Loader	动画加载器，页面加载时，展示一个动感的loading 效果，三角形旋转效果
24	Content Placeholder	内容占位符（骨架品），页面加载时，展示一个占位符，模拟内容加载效果，适用于图片、文本等内容的加载
25	Sticky Navbar	粘性导航栏，页面滚动时，导航栏会固定在顶部，适用于长页面的导航
26	Double Vertical Slider	双向垂直滑块，用户可以点击按钮，双向滚动，调整两个区域的大小，适用于比较两个图片或内容的场景
27	Toast Notification	通知弹窗，右下角展示一个通知弹窗，用户可以点击关闭，适用于提示重要信息
28	Github Profiles	Github 个人资料展示，输入用户名，点击按钮获取用户信息（请求 Github API），适用于展示个人信息
29	Double Click Heart	双击图片，增加喜欢的动画效果，适用于抖音快手移动端的点赞功能
30	Auto Text Effect	自动文本效果，输入文本，点击按钮自动生成动画效果，适用于展示动态文本
31	Password Generator	密码生成器，用户可以点击按钮生成随机密码，适用于注册账号、设置密码等场景
32	Good Cheap Fast	好、便宜、快，展示一个简单的页面，适用于展示产品、服务等场景
33	Notes App	笔记应用，用户可以在页面上添加、删除、编辑笔记，适用于记录个人笔记、学习笔记等场景
34	Animated Countdown	倒计时动画，展示倒计时时间，适用于活动、考试等场景
35	Image Carousel	图片轮播，用户可以点击图片切换到下一个图片，适用于展示图片、产品等场景
36	Hoverboard	悬停板，用户可以悬停在页面上，展示一个悬停板，适用于展示产品、服务等场景
37	Pokedex	Pokedex 应用，用户可以在页面上查看所有Pokemon的信息，适用于展示Pokemon的信息
38	Mobile Tab Navigation	移动端标签导航，用户可以在移动端点击标签切换页面，适用于移动端的导航
39	Password Strength Background	密码强度背景，用户可以输入密码，根据密码强度展示不同的背景颜色，适用于注册账号、设置密码等场景
40	3d Background Boxes	3D 盒子背景，用户可以点击按钮，展示一个3D盒子背景，适用于展示产品、服务等场景
41	Verify Account Ui	验证账号界面，用户可以在界面上输入账号、密码，点击按钮验证账号，适用于注册账号、登录账号等场景
42	Live User Filter	实时用户筛选，用户可以在界面上输入用户名、位置，点击按钮筛选用户，适用于展示用户列表等场景
43	Feedback Ui Design	反馈界面设计，用户可以在界面上输入反馈内容，点击按钮提交反馈，适用于收集用户反馈等场景
44	Custom Range Slider	自定义范围滑块，用户可以拖动滑块选择一个范围，适用于选择时间范围、价格范围等场景
45	Netflix Mobile Navigation	Netflix 移动端导航，用户可以在移动端点击标签切换页面，适用于移动端的导航
46	Quiz App	测应用，用户可以在页面上回答问题，点击按钮提交答案，适用于测试用户知识等场景
47	Testimonial Box Switcher	客户评价切换器，用户可以在页面上切换不同的客户评价，适用于展示客户评价等场景
48	Random Image Feed	随机图片生成器，用户可以点击按钮生成随机图片，适用于展示图片、产品等场景
49	Todo List	待办事项列表，用户可以在页面上添加、删除、编辑待办事项，适用于记录个人待办事项、学习待办事项等场景
50	Insect Catch Game	昆虫捕获游戏，用户可以在界面上点击昆虫，捕获昆虫，适用于娱乐、学习等场景
51	Simple Timer	简单定时器，用户可以点击按钮开始、暂停、重置定时器，适用于设置定时器等场景