Trae再次发力，帮我们实现输入密码挡住动漫人物眼睛的效果

前言

上一篇文章，我们使用Trae帮我们实现了动漫人物跟随鼠标移动的效果，那么我们今天就来使用Trae实现一个输入密码时，挡住动漫人物眼睛的效果。

这次的效果难度应该也是差不多的，看看Trae能不能实现这个效果。或者有没有更加经验的结果，让我们拭目以待吧~

我们给Trae 简单的提示，看看Trae是怎么实现这个效果。首先Trae先分析我们现在的代码，主要是要添加挡眼睛的元素，然后用户输入密码时，把动画追加到挡眼睛的元素上。

等待几分钟之后，Trae 生成的效果，如图，手不够长，不够可爱，于是我让Trae ，全网搜索图片应用上，要把眼睛挡住哦再等待2分钟，看看能不能实现我们要的效果

鼠标未聚焦密码框的效果鼠标聚焦密码框的效果

看看之前的效果有没有影响到

动漫任务向右下角看的效果动漫任务向左下角看的效果动漫任务向上看的效果很好，都没有影响到。

Trae核心代码解读

用户聚焦输入框，添加动画并且让动漫人物的手挡住眼睛的效果，让用户感觉更加真实，有种输入密码不会被泄露的感觉，这样让我们的登录界面的用户交互更加完美，相信用户也会被我们的登录页面动画所吸引的。

捂眼睛的手部样式 - 可爱加长版

js 复制代码

.hand {
    position: absolute;
    width: 35px;
    height: 45px;
    background: linear-gradient(135deg, #ffdbac 0%, #fdbcb4 100%);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    border: 2px solid #e8a398;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

对应的挡住眼睛的动画效果

js 复制代码

.hand.active.left-hand {
    /* 左手更高更内收，覆盖左眼 */
    transform: scale(1.05) translate(10px, -6px) rotate(-35deg);
}

.hand.active.right-hand {
    /* 右手更高更内收，覆盖右眼 */
    transform: scale(1.05) translate(-10px, -6px) rotate(35deg);
}

捂住动漫人物眼睛的手部元素

js 复制代码

<div class="hand left-hand"></div>
<div class="hand right-hand"></div>

密码输入时的捂眼睛效果

js 复制代码

const passwordInput = document.getElementById('password');
const characterFace = document.querySelector('.character-face');
const leftHand = document.querySelector('.left-hand');
const rightHand = document.querySelector('.right-hand');

输入密码时捂眼睛

js 复制代码

passwordInput.addEventListener('focus', () => {
    characterFace.classList.add('shy');
    leftHand.classList.add('active');
    rightHand.classList.add('active');
});

离开密码框时恢复正常的js代码

csharp 复制代码

passwordInput.addEventListener('blur', () => {
    if (!passwordInput.value) {
        characterFace.classList.remove('shy');
        leftHand.classList.remove('active');
        rightHand.classList.remove('active');
    }
});

表单提交处理,这里Trae只是简单的模拟登录成功,实际项目中需要根据项目的需求来处理表单提交,比如发送请求到后端,验证用户信息,等等。

js 复制代码

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的表现也是值得称赞的，他通过精心设计的动画和视觉效果，成功地将动漫人物与登录功能结合，创造出了一种全新的用户体验，虽然个别网站已经实现了这个挡眼睛的效果，但是作为前端无需在自己找代码实现挡眼睛，或者自己手搓，Trae AI 已经帮我们实现了，也没有乱改我们的代码，我们只需要简单的替换或者是修改，就可以把这个效果融入到我们的项目里面，快点来试试Trae，帮你实现这个眼睛在用户输入密码时挡住眼睛的效果吧。