加入动画和细节打磨，让网站有质感
网站好看了，但还缺一点"质感"。
一个好产品和一个"能用"的产品之间的差距，往往就在这些细节：动画是否流畅、过渡是否自然、小地方有没有用心。这一关专门做这件事。
动画的作用：不只是好看
很多人觉得动画是"装饰"，可有可无。但好的动画其实有实际作用：
引导注意力：入场动画让用户的眼睛自然地跟着内容移动，知道先看什么。
提供反馈：按钮 hover 时的微小变化，告诉用户"这个是可以点击的"。
建立层次感：卡片依次出现，而不是一次性全部弹出，让用户感受到内容的节奏。
传递品牌感：流畅的动画让产品显得"精致"，生硬的动画让产品显得"廉价"。
动画的黄金法则
在让 AI 加动画之前，先记住这几条原则：
时长要短：大多数 UI 动画应该在 200-400ms 之间。超过 500ms 就会让用户觉得"卡"。
用 transform 和 opacity：这两个属性的动画由 GPU 处理，性能最好，不会导致页面卡顿。避免动画 width、height、margin 等属性。
不要过度：每个页面最多 2-3 种动画效果。动画太多会让用户眼花缭乱，反而降低体验。
有目的：每个动画都应该有理由存在，不要为了动而动。
第一步：加入场动画和滚动动画
对 AI 说：
帮我给网站加上动画效果： 入场动画： - 首页 Hero 区域的文字逐行淡入（标题先出现，副标题延迟 0.2 秒，按钮再延迟 0.2 秒） - 动画要自然，不要太夸张 滚动动画： - 作品卡片在滚动进入视口时淡入（用 Intersection Observer） - 卡片依次出现，有轻微的向上位移 - 不要一次性全部出现，要有节奏感 页面切换： - 路由切换时有淡入淡出过渡（不要太长，0.2-0.3 秒就够）
第二步：加上细节打磨
对 AI 说：
帮我做最后的细节打磨： 1. 加上 favicon（浏览器标签页的小图标，用你名字首字母做一个简单的 SVG 图标） 2. 每个页面设置独立的 title（格式：页面名 - 你的名字） 3. 加上返回顶部按钮（滚动超过一屏后显示，点击平滑滚动到顶部） 4. 所有外部链接在新标签页打开 5. 图片加上 loading="lazy"（懒加载）
第三步：全站自查
对 AI 说：
帮我做一次全站自查： - 有没有断裂的布局 - 手机端有没有内容溢出屏幕 - 有没有拼写错误 - 有没有无法点击的链接 - 控制台有没有报错 列出所有问题，然后帮我修好。
关于 Intersection Observer
滚动动画用到了一个叫 Intersection Observer 的浏览器 API。它的作用是：监听某个元素是否进入了视口（用户能看到的区域）。
当元素进入视口时，触发动画；当元素离开视口时，可以重置动画（让用户再次滚动到这里时再次触发）。
这比传统的"监听滚动事件"性能好很多，因为它不需要每次滚动都计算元素位置。
你不需要自己写这段代码，AI 会帮你实现。但知道这个概念，能帮你更准确地描述你想要的效果。
关于 favicon
Favicon 是浏览器标签页上的小图标，通常是 16x16 或 32x32 像素。虽然很小，但它是品牌识别的重要组成部分。
你可以让 AI 用你名字的首字母做一个简单的 SVG favicon：
帮我创建一个 favicon.svg，用我名字的首字母"L"（换成你的首字母）， 深色背景，白色文字，圆角正方形，放到 public/ 目录里， 并在 index.html 里引用它。
通关条件
完成以下四步即可通关：
- 入场动画完成
- 滚动动画完成
- 细节打磨完成（favicon、title、返回顶部）
- 全站自查通过
卡住了？
- 动画不流畅？让 AI 检查是否用了
transform和opacity做动画（这两个性能最好） - Intersection Observer 不生效？让 AI 检查
threshold和rootMargin的配置 - 返回顶部按钮位置不对？告诉 AI 你想要它在哪个位置（通常是右下角固定定位）
- 页面切换动画闪烁？让 AI 检查动画的触发时机，确保新页面进入时旧页面已经退出
通关条件
完成以下四步即可通关：
- 入场动画完成
- 滚动动画完成
- 细节打磨完成（favicon、title、返回顶部）
- 全站自查通过
卡住了？
- 动画不流畅？让 AI 检查是否用了
transform和opacity做动画（这两个性能最好） - Intersection Observer 不生效？让 AI 检查
threshold和rootMargin的配置 - 返回顶部按钮位置不对？告诉 AI 你想要它在哪个位置（通常是右下角固定定位）
- 页面切换动画闪烁？让 AI 检查动画的触发时机，确保新页面进入时旧页面已经退出