纯原生实现动态表情交互表白代码（附思路）

代码下载地址：https://pan.baidu.com/s/1fzn0ApNVGLYMzQtRdaRzxA?pwd=ajgq

效果演示如下（鼠标移入可查看）

一、整体结构

纯原生实现动态表情交互表白代码，核心在于通过鼠标位置实时调整角色的表情和眼神。

以下是详细思路：

一、整体结构

1. HTML结构
   • 主体由标题、副标题、角色容器(boi)和两个按钮组成
   • 角色boi包含（主要是通过border-radius、）：
     • 左右腮红
     • 左右眼睛
     • 嘴巴
     • 脸蛋
2. CSS设计
   • 使用Flex布局实现居中显示
   • 通过绝对定位实现元素叠加
   • 利用CSS变量(–happiness等)动态控制样式
   • 使用径向渐变和圆角创建卡通效果
3. JavaScript逻辑
   • 鼠标追踪实现交互反馈
   • 动画系统实现平滑过渡

二、核心交互机制

1. 表情控制系统
   • 4个核心变量：
     • happiness：开心程度(0-1)
     • derp：呆萌系数
     • px/py：视线坐标(0-1)
2. 鼠标位置计算

   
   // 计算到两个按钮中心的距离
   let dx1 = x - btnDelete中心X
   let dy1 = y - btnDelete中心Y
   let dx2 = x - btnCancel中心X
   let dy2 = y - btnCancel中心Y 
   // 计算相对位置比例
   let px = (x - confirm左边界)/confirm宽度
   let py = (y - confirm上边界)/confirm高度 
   // 动态计算开心值
   let happiness = (到拒绝按钮距离 / 总距离)^0.75
   

3. 动画过渡系统

   
   function update() {
   // 对每个属性进行插值运算 current[prop] += (target值 - 当前值) * 0.1 
   // 更新CSS变量
   boi.style.setProperty(</span><span class="token string">--</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prop<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">, current值) requestAnimationFrame(update) }

三、视觉元素动态控制

1. 眼睛系统
   • 尺寸：随happiness减小而变大

   
   width: calc(26% - var(--happiness) * 2%);
   

   • 瞳孔位置：通过transform动态偏移

   
   transform: translate(calc((var(--px) + var(--derp)0.5)100%));
   

2. 腮红效果
   • 位置：随px/py偏移
   top: calc(45% + var(–py)10%);
   • 透明度：与happiness平方成正比
3. 嘴巴动画
   • 形状：通过border-radius动态计算
   border-radius: calc((1 – happiness)10em) … ;
   • 高光效果：使用伪元素创建动态反光

四、交互响应设计

1. 默认状态（鼠标离开时）
   • 开心值0.9
   • 视线居中
   • 呆萌系数为1（瞳孔自然分散）
2. 悬停响应（鼠标移动时）
   • 视线跟随鼠标位置
   • 靠近拒绝按钮时：
     • 开心值降低
     • 瞳孔收缩
     • 嘴巴变平直
3. 视觉反馈增强
   • 使用径向渐变创建面部阴影
   background-image: linear-gradient(to bottom, #5a8, rgba(85,170,136,0));
   • 动态腮红透明度
   • 嘴巴高光实时变化

五、性能优化点

1. RAF动画
   使用requestAnimationFrame实现60fps流畅动画
2. 智能差值计算javascript复制if(Math.abs(target – current) < 0.01) 直接赋值避免微小计算
3. CSS硬件加速
   通过transform属性启用GPU加速

六、扩展可能性

1. 增加触摸支持
   添加touchmove事件处理
2. 表情状态扩展
   • 添加眨眼动画
   • 增加面部旋转参数
3. 交互反馈增强
   • 点击时的表情变化
   • 按钮按压效果联动