每次在页面上敲键盘，总会有种机械感——空白的文本框、单调的光标。要是Neng让它们“活”起来让用户在敲字的瞬间被一只萌萌的柯基逗笑，那该多好！本文将从零开始，手把手教你把一只 SVG 柯基变成会盯着鼠标、聚焦时注视输入框、点一下就眨眼、敲几下文字还Neng弹个小跳并冒出气泡提示的互动组件。

一、准备工作：把照片转成可控的 SVG

想让眼睛动起来必须先拥有Neng够单独操控的图形元素。Zui省事的办法是挑选一张高清柯基头像，用在线工具把它转换为矢量图，然后在编辑器里给左眼与右眼分别加上唯一的 id。

下面这段代码展示了如何在 SVG 中为两只瞳孔设定 ID，以便后续用 JavaScript 调整它们的位置：

保存好 SVG 后把它嵌进页面Zui外层的容器里这个容器稍后会负责旋转和弹跳效果。

二、CSS：让柯基动起来 1. 打字弹跳动画

@keyframes bounce-typing {
  0%   { transform: translateY scale; }
  30% { transform: translateY scale; } /* 向上 + 稍放大 */
  60% { transform: translateY scale; }   /* 回落 + 稍收缩 */
 100% { transform: translateY scale; }
}
.dog-container.bounce {
  animation: bounce-typing .4s ease-out;
}

2. 气泡提示样式与出现隐藏切换

.thought-bubble {
  opacity: 0;
}
.thought-bubble.show {
  opacity :1;
}

3. 鼠标点击时的眨眼关键帧

@keyframes wink-animation {
   0%,100% { transform: scaleY; }   /* 正常睁眼 */
   50%      { transform: scaleY; }/* 闭合到20% */
}
.wink {
   animation:wink-animation .3s ease-in-out forwards;
}

三、JS：实现交互细节 1. 聚焦/失焦/文字输入三连击

// 获取 DOM
const inputEl = document.querySelector;
const thoughtBubble = document.querySelector;
const dogContainer = document.querySelector;
// 防抖计时器
let bubbleHideTimer = null,
    bounceDebounce = null;
// 聚焦：让小家伙盯住输入框
inputEl.addEventListener => {
   lookAtInput = true;
});
// 离开：恢复默认视线并隐藏气泡
inputEl.addEventListener => {
   lookAtInput = false;
   thoughtBubble.classList.remove;
   thoughtBubble.textContent = "";
});
// 输入时触发弹跳 + 气泡
inputEl.addEventListener => {
   const len = inputEl.value.length;
   if  {
       // 根据字符数挑选文案
       if  thoughtBubble.textContent = "写得太多啦，我dou跟不上啦~";
       else if  thoughtBubble.textContent = "哇塞，你写得真棒！";
       else               thoughtBubble.textContent = "嘘…还有啥想说？";
       thoughtBubble.classList.add;
       clearTimeout;
       bubbleHideTimer = setTimeout => {
           thoughtBubble.classList.remove;
       },1800);
   } else {
       thoughtBubble.classList.remove;
   }
   // 弹跳动画
   clearTimeout;
   dogContainer.classList.add;
   bounceDebounce = setTimeout => {
       dogContainer.classList.remove;
   },400);
});

2. 全局点击触发眨眼

window.addEventListener => {
   // Yi经在眨眼则直接返回
   if ) return;
   leftEyeGroup.classList.add;
   rightEyeGroup.classList.add;
   // 动画结束后移除类名
   setTimeout => {
       leftEyeGroup.classList.remove;
       rightEyeGroup.classList.remove;
   },300);
});

3. 鼠标移动 → 瞳孔追随

const dogSvg = document.getElementById;
const leftPupil = document.getElementById;
const rightPupil= document.getElementById;
let lookAtInput = false,
    smoothingFactor = .15,
    maxRadius = 4;
// 初始坐标占位对象
let currentPos={ left:{x:70,y:80}, right:{x:130,y:80} };
function animate {
   // ---------- 确定目标点 ----------
   let targetPoint;
   if  {
      // 输入框中心相对 SVG 的坐标
      targetPoint = {x :85 , y :110};
   } else {
      const svgPoint = dogSvg.createSVGPoint;
      svgPoint.x = mouseX;
      svgPoint.y = mouseY;
      targetPoint = svgPoint.matrixTransform.inverse);
   }
   // ---------- 左眼 ----------
   const deltaLx= targetPoint.x - currentPos.left.x,
         deltaLy= targetPoint.y - currentPos.left.y,
         angleL= Math.atan2,
         distL= Math.min,maxRadius);
   const destLx= currentPos.left.x + Math.cos*distL,
         destLy= currentPos.left.y + Math.sin*distL;
   // ---------- 平滑geng新 ----------
   currentPos.left.x += *smoothingFactor;
   currentPos.left.y += *smoothingFactor;
   // ---------- 同理处理右眼 ----------
   const deltaRx= targetPoint.x - currentPos.right.x,
         deltaRy= targetPoint.y - currentPos.right.y,
         angleR= Math.atan2,
         distR= Math.min,maxRadius);
   const destRx= currentPos.right.x + Math.cos*distR,
         destRy= currentPos.right.y + Math.sin*distR;
   currentPos.right.x += *smoothingFactor;
   currentPos.right.y += *smoothingFactor;
   // ---------- 应用到 DOM ----------
   leftPupil.setAttribute;
   leftPupil.setAttribute;
   rightPupil.setAttribute;
   rightPupil.setAttribute;
   requestAnimationFrame;
}
// 启动循环
animate;
// 捕获鼠标坐标
let mouseX=0, mouseY=0;
window.addEventListener;

    

这里采用了经典的「当前值 +=  × smooth」公式，使瞳孔运动显得柔软而不突兀。

    4. 柯基头部随鼠标倾斜

function rotateWithMouse{
    const centerX=document.documentElement.clientWidth/2,
             centerY=document.documentElement.clientHeight/2;
    const offsetX=e.clientX-centerX,
             offsetY=e.clientY-centerY;
    const rotX=*10 * -1,
             rotY=*10;
    dogContainer.style.transform=`rotateX rotateY`;
}
window.addEventListener;

    

只要把容器的透视属性打开，就Nengkan到柯基随着指针轻轻摇头，像真的在盯着你一样。

    四、性Neng优化与部署注意事项     

        

requestAnimationFrame 替代 setInterval：浏览器自带帧率同步机制，可自动暂停后台标签页，省电又不卡。

        

避免频繁重排：所有位置信息均通过属性修改 ) 完成，不涉及布局重新计算。

        

CORS 与资源托管：SJVG 文件Zui好放在同源服务器上，否则跨域读取坐标会报错。

       ️

Lighthouse 检测：打开 Chrome DevTools → Lighthouse，确保首屏渲染时间保持在 500ms 以下 。

   

    五、完整案例与源码获取渠道     Gitee 镜像仓库     GitHub 官方仓库     CORS‑Free 在线演示     六、——让 UI 多一点温度    

Ru果你Yi经按照上面的步骤把柯基装进了自己的项目，那么恭喜，你Yi经成功为页面注入了一份「会呼吸」的灵魂。无论是登录页还是评论区，只要有这样一个会眨眼、会追光的小伙伴，douNeng瞬间提升用户留存率，让枯燥的文字变得活泼有趣。

   

©2026 前端也Neng这么有趣 | 作者 JYeontu – 喜欢羽毛球，也喜欢写代码 🍃

Ru果觉得这篇教程对你有帮助，请点个赞 👍 或者分享到社交平台，让geng多同学一起玩转前端互动 🎉。 关注公众号「前端也Neng这么有趣」获取Zui新干货～

---