✨ 开源学习项目

前端学习实验室

一个精心整理的前端知识库,包含 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 小时
📊

HTML Table 表格

从结构到可访问性,系统掌握 table、thead、th、colgroup 等表格核心用法与布局细节。

📚 12 个演示 🧩 细颗粒度 ⏱️ 1-2 小时
🧩

CSS 属性模块

聚焦“属性粒度”的学习路线,逐个拆解 clip-path 等重要属性。

📚 逐步更新 ✂️ clip-path ⏱️ 1-2 小时
📏

DOM 尺寸和位置 API

全面掌握 JavaScript 中的元素测量和定位技术,包含 offset、client、scroll、getBoundingClientRect 等 12 个核心知识点。

📚 12 个知识点 🎮 50+ 演示 ⏱️ 3-4 小时

学习统计

75+

知识点

210+

交互演示

7

学习模块