前言
你是否看到一个登录页面，它的背景是一个充满活力的动漫人物，她的眼睛会跟随你的鼠标移动，仿佛在注视着你。
这个页面不仅美观，而且富有互动性，让人眼前一亮。那么，这个页面是如何实现的呢？让我们一起来探讨一下。
在这个看似简单的登录页面背后，隐藏着前端技术的精妙运用。通过纯CSS和原生JavaScript，我们创造了一个具有生命力的动漫人物，她的眼睛能够实时追踪鼠标移动，为冰冷的登录界面注入了灵魂。
我们给Trae 简单的提示，看看Trae能不能实现这个效果。
等待几分钟之后，Trae 生成的效果
动漫任务向右下角看的效果
动漫任务向左下角看的效果
动漫任务向上看的效果
Trae核心代码解读
鼠标跟随动画的实现原理非常简单，就是通过监听鼠标移动事件，获取鼠标的坐标，然后根据坐标计算出眼睛的位置，最后将眼睛的位置应用到页面上。
眼睛跟随鼠标的核心算法,主要是使用了三角函数来计算角度和距离,然后根据角度和距离来计算瞳孔的位置。
document.addEventListener('mousemove', (e) => {
const eyes = document.querySelectorAll('.eye');
eyes.forEach(eye => {
const pupil = eye.querySelector('.pupil');
const eyeRect = eye.getBoundingClientRect();
// 计算眼睛中心点坐标
const eyeCenterX = eyeRect.left + eyeRect.width / 2;
const eyeCenterY = eyeRect.top + eyeRect.height / 2;
// 使用三角函数计算角度和距离
const angle = Math.atan2(e.clientY - eyeCenterY, e.clientX - eyeCenterX);
const maxDistance = 8; // 限制瞳孔移动范围
const distance = Math.min(maxDistance, Math.hypot(e.clientX - eyeCenterX, e.clientY - eyeCenterY) / 5);
// 计算瞳孔新位置
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;
// 应用平滑变换
pupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
});
});
毛玻璃效果，主要是使用了CSS的backdrop-filter属性来实现。让登录表单的背景模糊，从而让表单上面的动漫人物更加生动形象。
.login-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}
表单提交处理,这里Trae只是简单的模拟登录成功,实际项目中需要根据项目的需求来处理表单提交,比如发送请求到后端,验证用户信息,等等。
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
// 模拟登录成功
alert('登录成功！欢迎 ' + username);
} else {
alert('请填写完整信息');
}
});
实现这个效果的意义
传统的登录页面往往冰冷机械，而Trae AI创造的动漫人物登录界面，标志着人机交互从功能性向情感化的重大转变。当用户看到动漫人物的眼睛随着鼠标移动而转动时，会产生一种被关注和理解的感觉，这种微妙的心理效应能够显著提升用户体验。
总结
通过结合CSS动画、JavaScript事件处理和毛玻璃效果，我们实现了一个具有动态交互和视觉吸引力的动漫人物登录界面。这不仅增加了页面的趣味性，也提升了用户的参与度和满意度。
Trae的表现也是值得称赞的，他通过精心设计的动画和视觉效果，成功地将动漫人物与登录功能结合，创造出了一种全新的用户体验，虽然个别网站已经实现了，但是作为前端无需在自己找代码，或者自己手搓，Trae AI 已经帮我们实现了，我们只需要简单的替换或者是修改，就可以把这个效果融入到我们的项目里面，快点来试试Trae，帮你实现这个眼睛跟随鼠标移动的效果吧。
