龍霄主題四個小怪獸守護的登入：趣味互動動效設計深度解析

一、不是插圖，是程式碼

打開 https://lx.yfdxs.com/login，頁面底部站著四個彩色的「小怪獸」——紫色、黑色、橙色、黃色。核心程式碼在 LoginAnimatedCharacters.vue 中，透過四個 div + 精緻的 computed 計算屬性賦予它們生命。

二、四個角色，四種性格

三、滑鼠追蹤

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 單次，遞迴永不停止

五、技術總結

這種細節是區別「能用的網站」和「讓人記住的網站」的關鍵。