点击开关点亮灯泡：纯 CSS 发光灯泡 + 开关音效
Online Tutorials20:587万 次观看入门CSS
看完视频，就在编辑器里复刻一个同款小作品吧。
用纯 CSS 画出一根电线吊着的灯泡和右下角的按压开关：点击开关，灯泡点亮、多层光晕铺满全屏并伴随咔哒声，再点熄灭。练习 body 类切换驱动全局状态、多层 box-shadow 叠加辉光、透明元素 + 偏移阴影勾出立体曲线，以及 audio 音效反馈。
- css
- light-bulb
- box-shadow
跟练作品1
同类跟做视频
11:44用 HTML 和 CSS 做一个拟真键盘
入门DevyntraTech
纯 HTML + CSS 画出一块带立体质感的键盘，重点练习 Flex 布局与圆角、阴影、渐变等拟物细节，做完可直接在编辑器复刻。
- css
- keyboard
10:29用 HTML 和 CSS 做跳跃旋转文字动画
入门Online Tutorials
纯 CSS 让文字逐字跳跃翻转的动画特效，重点练习 keyframes 动画编排与 nth-child 逐字错帧延迟，做完可直接当页面标题动效。
- css
- animation
- text-effect
5:07用纯 CSS 做向下滚动指示动画
入门Online Tutorials
做一个鼠标滚轮形状的向下滚动指示动画，练习 border 画图标、伪元素与 keyframes 无限循环的组合，适合放在全屏首屏引导用户下翻。
- css
- animation
- scroll
41:43从零构建“台灯”登录动画
进阶CodeByGaurav
跟做一盏拟物“台灯”登录页：聚焦输入框时台灯亮起、灯光洒向登录卡片，失焦熄灭。练习 CSS 拟物绘制与光影过渡，以及用 JS 把表单焦点联动到动画状态。
- css-animation
- login-form
- css-art
17:34用 Tailwind CSS 做一个新拟态 UI 工具面板
进阶UI Code
用 Tailwind CSS 把一张新拟态风格的 UI 工具面板设计稿做成可运行网页，练习柔和双向阴影下的按钮、开关、搜索框与彩色滑块等控件的凸起和凹陷质感。
- neumorphism
- tailwindcss
- ui-components
22:33霓虹模糊响应式个人资料卡片
进阶Bedimcode
用 HTML、CSS 和少量 JS 做三张霓虹发光的个人资料卡片，点击按钮翻出毛玻璃社交栏与资料面板；练习 backdrop-filter 毛玻璃、rotate3d 翻转和 GSAP 错峰入场动画。
- glassmorphism
- card
- gsap
视频来自 B 站与 YouTube，站内播放使用平台官方嵌入组件，版权归原 UP 主 / 频道所有。当前点击卡片将在新标签页打开原站。