文章最后更新时间：2026-06-21 11:50:21
登录页面的互动效果
鼠标在左侧小猫区域移动时，小猫和三个几何人物的眼睛会跟随鼠标转动。
输入用户名时，小猫会伸长脖子偷看，三个几何人物会呈现吃惊的表情（嘴巴变圆）。
输入密码时，小猫和几何人物会 “避嫌”，恢复到原来的状态。
文章末尾有成品展示
![图片[1]-AI 开发趣味登录页：会偷看的小猫 + 互动几何人物，手把手教你打造同款 VibeCoding 登录界面](https://www.902d.com/wp-content/uploads/2026/06/00867f08db20260617003439.webp)
开发步骤
步骤 1：准备 AI 编程工具
输入以下提示词：
请编写一个登录页面，分为左右两个部分。左侧绘制一只黄色的小猫，风格卡通可爱；右侧包含登录信息区域，有用户名输入框、密码输入框和蓝色的登录按钮。要求从专业 UI 设计角度，确保页面美观、布局合理，使用 HTML、CSS 和 JavaScript 实现。
发送后，AI 会生成基础的登录页代码，将其保存为login.html，用浏览器打开即可看到初始效果（此时小猫眼睛是静态的）。
步骤 2：添加小猫眼睛跟随鼠标的效果
输入提示词：
为登录页左侧的黄色小猫添加交互效果：当鼠标在页面左侧小猫所在区域移动时，小猫的眼睛要跟随鼠标移动，眼睛移动速度与鼠标移动速度匹配，效果自然流畅。请修改代码实现该功能，如需引入额外库请说明。
AI 会在原有代码基础上添加 JavaScript 逻辑，实现眼睛跟随效果。保存后刷新浏览器，即可看到小猫眼睛跟随鼠标转动。
步骤 3：添加小猫偷看用户名、几何人物吃惊的效果
输入提示词：
为登录页添加以下交互：当用户点击并输入用户名时，左侧黄色小猫的眼睛看向用户名输入框，脖子向输入框方向拉长，呈现 “偷看” 效果；同时左侧的三个几何形状人物（分别为紫色长条、黑色小个、橘色圆胖，与小猫同水平线且不遮挡）要呈现吃惊的表情（嘴巴变圆）。当鼠标离开用户名输入框时，小猫和几何人物恢复原状态。请修改代码实现。
AI 会继续完善代码，添加这些交互逻辑。
步骤 4：添加几何人物眼睛跟随鼠标的效果
输入提示词：
让左侧的三个几何人物（紫色长条、黑色小个、橘色圆胖）的眼睛也跟随鼠标移动，与小猫眼睛的跟随效果一致，营造出它们也在 “盯着” 鼠标的感觉。请修改代码实现。
步骤 5：调整细节（如几何人物位置、样式）
如果对几何人物的位置、嘴巴颜色、眼睛样式不满意，可继续发送提示词，例如：
将三个几何人物分散开，橘色圆胖人物适当左移，黑色和紫色人物适当右移；将它们的嘴巴改为白色；把橘色圆胖人物的眼睛样式调整为和紫色人物一样。请修改代码。
通过不断细化提示词，就能逐步实现和趣味登录页啦！
成品模板代码 ：
网站名称：玩转网
本文链接：
版权声明：知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
本站资源仅供个人学习交流,转载时请以超链接形式标明文章原始出处,（如有侵权联系删除）
