← FC Coder · HomePhase 04 · Lesson 42 · 60 min
Lesson42
Phase Four · Game · Matchday 42 · Smooth Move
CSS transition + transform
流畅度第一课
Today's 3 Jobs · 今天这三件事
- 01PlayerCard 加 transition + hover transform浮起来
- 02translate / rotate / scale 三剑客叠加用
- 03🌟 流畅 60fps 体验GPU
41 课 transform 平移但瞬间跳。今天 `transition` 加进来 —— 0.3 秒平滑过渡。三剑客 translate/rotate/scale 叠加用 · Tailwind 一串 class 搞定。
Concept
transition + transform 双拼
// 写在基础 class · hover 触发
transition
transition-transform duration-300
三剑客
translate / rotate / scale
Tailwind
hover:scale-110 hover:-translate-y-2
Half 2
basic · 三剑客 · AI 翻牌
01transition 基础
01Min
Cursor + pnpm dev
老三件套。
02Min
PlayerCard className 加 transition-transform duration-300 hover:scale-110 hover:-translate-y-2
鼠标移上 · 平滑浮起。
02三剑客叠加
03Min
加 hover:rotate-2 微旋
卡片轻微歪一点 · 有「活」感。
04Min
加 active:scale-95 · 点击下沉
鼠标按下 · 卡片缩小一点。反馈清楚。
05Min
/fantasy 所有 PlayerCard 应用
整页活起来。
03AI Pair 翻牌
06Min
AI Pair:加翻牌 · transform-style preserve-3d
进阶 · AI 写 · 看一眼就好 · 不深。
07Min
📸 截图 hover 状态
Phase 4 第 2 张战利品。
讲给爸爸听
3 题
01transition 是什么?Hint ↓
过渡时间 · 让 transform 变化平滑。
02transform 三剑客?Hint ↓
translate / rotate / scale。叠加用。
03ease-out 和 ease-in-out 差?Hint ↓
ease-out 自然 · ease-in-out 柔和。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0