✨ 开源学习项目

前端学习实验室

一个精心整理的前端知识库,包含 CSS 动画、Grid 布局等核心技术。
通过 120+ 个交互式示例,让学习变得简单有趣。

🎬

CSS 动画教程

完整的 Transform、Transition 和 Animation 教程,包含 32 个核心知识点和 120+ 个交互式演示。

📚 32 个知识点 🎮 120+ 演示 ⏱️ 4-6 小时
📐

CSS Grid 布局

从基础到高级的 Grid 布局教程,涵盖网格系统的所有核心概念和实际应用场景。

📚 10 个示例 🎯 实战导向 ⏱️ 2-3 小时
💡

Box-Shadow 工具

交互式阴影生成器,通过可视化方式学习和调试 CSS 阴影效果,支持多层阴影和光源控制。

🛠️ 交互工具 🎨 实时预览 ⏱️ 随时使用
🎨

SVG 图形

从基础形状到高级动画的完整 SVG 教程,学习创建可缩放、可交互的矢量图形。

📚 10 个知识点 🎮 30+ 演示 ⏱️ 3-4 小时
🎯

CSS 现代选择器

掌握 :has()、:is()、:where() 等强大的现代选择器,提升样式控制能力和代码可读性。

📚 11 个演示 🎯 实战导向 ⏱️ 2-3 小时

学习统计

63+

知识点

160+

交互演示

5

学习模块