一、不是插圖，是程式碼
打開 https://lx.yfdxs.com/login，頁面底部站著四個彩色的「小怪獸」——紫色、黑色、橙色、黃色。核心程式碼在 LoginAnimatedCharacters.vue 中，透過四個 div + 精緻的 computed 計算屬性賦予它們生命。
二、四個角色，四種性格
| 角色 | 顏色 | 特點 |
|---|---|---|
| 🟣 紫色怪 | #6C3FF5 | 最高，會眨眼，會伸長脖子偷看 |
| ⚫ 黑色怪 | #2D2D2D | 高冷，也會眨眼，動作克制 |
| 🟠 橙色怪 | #FF9B6B | 矮胖半圓，簡約瞳孔風格 |
| 🟡 黃色怪 | #E8D754 | 有小嘴巴，情緒寫在臉上 |
三、滑鼠追蹤
const faceX = Math.max(-15, Math.min(15, deltaX / 20)) // 眼球 X
const faceY = Math.max(-10, Math.min(10, deltaY / 30)) // 眼球 Y
const bodySkew = Math.max(-6, Math.min(6, -deltaX / 120)) // 身體傾斜四、輸入時的小劇場
- 聚焦輸入框：紫黑兩怪互望 800ms
- 切換密碼可見：所有眼睛轉向密碼區，紫色怪隨機偷看（2~5 秒間隔）
- 眨眼：3~7 秒隨機間隔，150ms 單次，遞迴永不停止
五、技術總結
| 維度 | 實現 |
|---|---|
| 眼球跟隨 | deltaX/20, deltaY/30 縮放 |
| 身體傾斜 | CSS skewX + 負回饋偏移 |
| 眨眼 | 遞迴 setTimeout，3~7 秒隨機 |
| 輸入反應 | watch(isTyping) → 對視 |
| 效能 | effectScope + CSS transition + 清理 |
這種細節是區別「能用的網站」和「讓人記住的網站」的關鍵。
