请求实现随鼠标移入方向渐变填充的正方形交互效果

核心思路是用JavaScript判断鼠标移入元素的方向，再动态修改伪元素的transform-origin和transform属性，配合CSS过渡实现对应方向的填充动画，以下是具体实现方案：

步骤1：判断鼠标移入方向的逻辑 #

当鼠标进入元素时，通过以下步骤判断方向：

• 获取元素的位置与尺寸（getBoundingClientRect()）
• 获取鼠标的坐标（event.clientX、event.clientY）
• 计算鼠标相对于元素中心的偏移量，对比水平/垂直方向的偏移绝对值，确定是上下还是左右方向，再通过偏移正负判断具体是上/下、左/右。

步骤2：完整代码实现 #

整合JS与CSS的完整代码如下：

<div class="square"></div>

<style>
.square {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  position: relative;
  overflow: hidden; /* 防止伪元素动画超出正方形边界 */
}

.square::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3498db;
  transition: transform 0.5s ease;
}

/* 各方向的初始缩放状态 */
.square.from-top::before {
  transform-origin: top;
  transform: scaleY(0);
}
.square.from-bottom::before {
  transform-origin: bottom;
  transform: scaleY(0);
}
.square.from-left::before {
  transform-origin: left;
  transform: scaleX(0);
}
.square.from-right::before {
  transform-origin: right;
  transform: scaleX(0);
}

/* 悬停时触发填充动画 */
.square:hover::before {
  transform: scaleX(1) scaleY(1);
}
</style>

<script>
const square = document.querySelector('.square');

square.addEventListener('mouseenter', (e) => {
  const rect = square.getBoundingClientRect();
  // 计算元素中心坐标
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  
  // 计算鼠标相对于中心的偏移量
  const dx = e.clientX - centerX;
  const dy = e.clientY - centerY;
  
  // 判断移入方向
  let direction;
  if (Math.abs(dx) > Math.abs(dy)) {
    // 左右方向
    direction = dx > 0 ? 'right' : 'left';
  } else {
    // 上下方向
    direction = dy > 0 ? 'bottom' : 'top';
  }
  
  // 切换方向类
  square.classList.remove('from-top', 'from-bottom', 'from-left', 'from-right');
  square.classList.add(`from-${direction}`);
});
</script>

代码说明 #

1. CSS部分：

   • 添加overflow: hidden确保伪元素动画不会超出正方形范围
   • 为每个方向单独定义transform-origin和初始缩放状态（水平方向用scaleX(0)，垂直方向用scaleY(0)）
   • 悬停时统一设置缩放为1，触发过渡动画

2. JavaScript部分：

   • 监听mouseenter事件捕捉鼠标进入动作
   • 计算元素中心坐标与鼠标偏移量，判断移入方向
   • 动态添加/移除方向类，让CSS自动匹配对应动画初始状态

可调整项 #

• 修改transition中的0.5s可以调整动画快慢
• 替换background属性值可以更改填充颜色（支持渐变色）
• 如果正方形尺寸动态变化，建议在mouseenter事件中重新计算元素尺寸，避免方向判断错误

内容的提问来源于stack exchange，提问作者Didier2791