作为前端，简历上写"精通 CSS"谁都会，但打开简历就是一场动画秀，滚动触发入场动画、技能条自动填充、项目卡片 3D 悬浮、暗黑模式丝滑切换……面试官打开页面的那一刻，你已经赢了一半。
01 我是谁，现在在准备什么
3 年前端开发经验，技术栈 Vue/React 都用过，最近在看社招机会。
投了一圈发现一个很尴尬的问题：简历上写的东西都差不多，怎么让面试官记住你？
大家简历上都写"精通 CSS3 动画"“熟悉响应式布局”“掌握前端工程化”……说自己厉害的人太多了，怎么证明？靠面试现场写代码？那也太靠运气了。
与其在简历上说自己 CSS 很溜，不如让简历本身就是证据。
—— 某天投简历投到心态崩了的我
于是我想，能不能用 TRAE 帮我做一份「会动的简历」——不只是内容展示，而是打开页面的那一刻，就在展示我的前端功底。
02 我做了个什么小作品，想解决什么问题
「纯 CSS 动画简历」—— 一份单页 HTML 简历，所有动画效果用纯 CSS 实现，滚动到哪里，动效就跟到哪里。既是简历，又是前端能力的直接展示。
核心功能
| 功能 | 说明 |
|---|---|
 滚动入场动画 |
每个区块滚入视口时触发对应入场动效 |
 技能进度条 |
从 0 填充到目标值，渐变色 + 缓动曲线 |
 项目卡片悬浮 |
hover 时 3D 倾斜 + 阴影加深效果 |
 暗黑模式切换 |
右上角一键切换，CSS transition 丝滑过渡 |
 打字机副标题 |
Hero 区个人签名用纯 CSS 打字机动画逐字打出 |
 滚动进度条 |
页面右侧实时显示阅读进度，细节体现前端素养 |
效果预览
大概长这样（截图放你自己的真实效果）：
┌─────────────────────────────────────────┐
│ ● ● ● resume.fe-developer.com │
├─────────────────────────────────────────┤
│ │
│ ○ 王同学 │
│ / \ 前端开发工程师 │
│ 用 CSS 把简历做成一场动画秀 │
│ │
│ ── 技术栈 ───────────────────── │
│ Vue / React ████████████░ 90% │
│ CSS / 动画 ██████████░░ 85% │
│ TypeScript ████████░░░░ 80% │
│ │
│ ── 项目作品 ─────────────────── │
│ ┌─────────┐ ┌─────────┐ │
│ │ 🛒 电商 │ │ 📱 H5 │ │
│ │ 中台系统 │ │ 活动页 │ │
│ └─────────┘ └─────────┘ │
│ │
│ ── 工作经历 ─────────────────── │
│ ● 某互联网公司 · 高级前端 │
│ │ 2023 - 至今 │
│ ● 某创业公司 · 前端开发 │
│ 2021 - 2023 │
│ │
└─────────────────────────────────────────┘
还加了几个小彩蛋：
-
暗黑模式 — 右上角一键切换，护眼又专业
-
打字机效果 — Hero 区签名逐字打出，仪式感拉满
-
滚动进度条 — 阅读进度实时显示，细节体现素养
-
爱心跳动 — 点击页脚爱心有心形动画，小细节拉好感
03 我是怎么用 TRAE 做出来的
说出来你可能不信，整个过程基本就是对话了两三轮：
第一步：把需求说清楚
告诉 TRAE 我要做一份"纯 CSS 动画简历"，列出我想要的模块和动画效果，让它直接生成完整 HTML。一次性输出了完整代码，包括 CSS 动画和基础 JS。
第二步：调细节 + 加彩蛋
看完第一版后，让它改颜色、加暗黑模式、把项目卡片改成 3D tilt 效果、加打字机副标题……几个来回就调到满意了。
第三步：替换真实内容
把我的真实简历内容贴给 TRAE，让它把占位数据替换掉——技能、经历、项目，一条龙搞定。
核心提示词（节选）
【角色】
你是一位资深前端工程师，擅长用纯 CSS 动画实现炫酷效果。
请帮我做一份「纯 CSS 动画简历」——既是简历，也是作品展示。
【核心要求】
1. 纯 CSS 动画为主，JS 只做交互触发
2. 单页 HTML 文件，所有 CSS 内联，打开就能看
3. 移动端响应式适配
4. 滚动触发入场动画（IntersectionObserver + CSS class）
【动画清单】
- Hero 区：标题左滑入 + 头像右滑入 + 图标逐个浮起
- 技能栈：进度条从 0 填充到目标值，渐变色
- 工作经历：时间线从上往下"画"出来，节点逐个弹出
- 项目卡片：入场 stagger + hover 3D 倾斜
- 暗黑模式：CSS 变量切换 + transition 过渡
【风格】
现代简约，主色调青蓝，留白充足，动画节奏用 cubic-bezier
消耗情况
| 项目 | 数值 |
|---|---|
| 对话轮数 | 2-3 轮 |
| 积分消耗 | 约 200 积分 |
| 总耗时 | 约 1 小时 |
创作心得
我本来还担心 CSS 动画的细节要自己调很久，结果 TRAE 写出来的动画曲线、时长、stagger 延迟都挺到位的。我更多是在做"产品经理"——提需求、看效果、说"这里再快一点"“那里颜色再深一点”。技术实现它包了，我负责审美把关。
最有意思的是，做完之后发现：TRAE 不止是帮我省了写代码的时间，更重要的是让我敢去想那些以前觉得"太麻烦不值得做"的点子。 一个想法从"算了太费时间"变成"试试又何妨"，这个心态变化挺重要的。
04 成果展示
1.在线简历效果地址：
2.生成的简历html：
resume.html (58.5 KB)
3.用来给trae code 或者trae work得提示词生成简历文本（因为不能上次txt就给大家粘贴出来了）
【角色】
你是一位资深前端工程师，擅长用纯 CSS 实现炫酷的动画效果。请帮我做一份「纯 CSS 动画简历」——这既是我的简历，也是我的前端作品展示。
【核心要求】
- 纯 CSS 动画为主，尽量不依赖 JS 动画库（JS 只用来做交互触发和暗黑模式切换，动画本身用 CSS 实现）
- 单页 HTML 文件，所有 CSS 写在 里，方便直接打开就能看
- 移动端适配，响应式布局
- 技术栈展示用进度条/技能条的 CSS 动画
- 整体风格：简洁、专业、有设计感，不花哨但有细节
【页面结构（从上到下）】
第一屏：Hero 区（个人介绍）
- 大标题：姓名 + 职位（前端开发工程师）
- 副标题：一句话个人简介
- 头像区域：圆形头像，hover 时有轻微放大 + 光晕效果
- 联系方式图标行：GitHub / 邮箱 / 电话 / 博客，每个图标 hover 有动画
- 入场动画：页面加载时，标题从左滑入 + 淡入，头像从右滑入 + 淡入，图标从下逐个浮起
第二屏：技能栈
- 标题：「技术栈」
- 技能分类：前端框架 / 工程化 / 基础能力 / 其他工具
- 每个技能用进度条展示熟练度
- 进度条动画：滚动到这个区域时，进度条从 0 开始填充到目标百分比（用 CSS animation + scroll 触发）
- 技能条颜色：主色调渐变，不同分类用不同色系
- hover 技能条时，有轻微放大和发光效果
第三屏：工作经历
- 标题：「工作经历」
- 时间线布局：左边是时间，右边是公司 + 职位 + 描述
- 时间线用竖线连接，每个节点是一个圆点
- 入场动画：滚动到时，时间线从上往下"画"出来，节点逐个弹出，内容卡片从右侧滑入
- hover 某条经历时，卡片有轻微上浮 + 阴影加深效果
第四屏：项目经验
- 标题：「项目作品」
- 卡片式布局，每行 2 个（移动端 1 个）
- 每个项目卡片包含：项目名、一句话描述、技术标签、项目图片（用渐变色块代替图片占位）
- 卡片动画：
- 入场时从下方依次浮起（stagger 效果）
- hover 时有 3D 翻转/倾斜效果，显示更多项目详情
- 卡片底部有一条从左到右的下划线动画
- 技术标签用圆角标签展示，hover 有缩放效果
第五屏：教育背景 + 其他
- 标题：「教育与其他」
- 简洁的两列布局
- 左边：学历信息
- 右边：证书 / 语言能力 / 兴趣爱好
- 入场动画：两列从两侧向中间滑入
页脚：
- 「期待与您合作」之类的话
- 联系方式再次出现
- 一个小彩蛋：点击某个地方触发小动画（比如点击页脚的爱心，爱心跳动）
【彩蛋功能】
- 暗黑模式切换：右上角一个开关按钮，点击切换明暗主题，用 CSS transition 平滑过渡
- 滚动指示器：页面右侧有一个小的滚动进度条，随页面滚动变化
- 回到顶部按钮：滚动到一定位置后出现，点击平滑滚动到顶部
- 打字机效果：Hero 区的副标题用打字机动画逐字显示（纯 CSS 实现）
【视觉风格】
- 主色调：选一个现代感强的颜色（比如蓝紫色系或青蓝色系），你定
- 字体：用系统无衬线字体，中文优先苹方/微软雅黑
- 卡片：圆角 12px，轻阴影
- 整体留白充足，不要太挤
- 动画节奏：缓动曲线用 cubic-bezier，不要太生硬
【输出要求】
- 输出完整的单个 HTML 文件，所有 CSS 内联在 中
- JS 尽量少，只做必要的交互（暗黑模式切换、滚动监听触发动画等）
- 代码结构清晰，有注释
- 简历内容先用占位符（我之后自己改），但要看起来像一份真实的前端工程师简历
- 技能数据、工作经历、项目都用合理的前端工程师示例数据填充
请开始实现，做出一个让面试官眼前一亮的纯 CSS 动画简历！
最终成品是一个单文件 HTML 简历，只有一个文件，双击就能打开。体积不到 50KB，加载飞快，动画流畅，手机上看也没问题。
我把简历发到一个前端交流群里，有人说"这简历我要是面试官直接约面"，也有人问怎么做的。其实核心不是技术多难，而是用了一个巧劲——把简历本身变成了能力证明。
给前端同学的小建议：
如果你也在找工作，不妨想想：你的简历能不能本身就是一个作品？不一定是动画简历，也可以是一个有交互的作品集页面、一个可视化数据面板、甚至一个小游戏。前端的优势就是"所见即所得"，别浪费了这个天生的展示机会。
后续打算再加几个功能：打印适配（方便导出 PDF）、多主题切换、以及一个"面试官视角"的演示模式——不过先投简历要紧，这些慢慢加 
#TRAE求职作品秀 #CSS动画 #前端简历 #纯CSS #社招