当前位置：首页 > article >正文

在鼠标附近显示一个中心渐变色的高亮效果

article 2024/11/15 16:33:54

在鼠标附近显示一个中心渐变色的高亮效果，可以使用 CSS 的径向渐变（radial-gradient）来创建这个效果。这个方法会让高亮效果从中心向外渐变，逐渐变得透明，从而实现鼠标周围的区域高亮。

使用径向渐变实现鼠标附近的高亮效果

我们将修改之前的示例，使用 radial-gradient 来实现中心渐变色的高亮效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Highlight Effect with Gradient</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
    }

    .highlight {
      position: absolute;
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, rgba(255, 255, 0, 0.5) 0%, rgba(255, 255, 0, 0) 60%);
      pointer-events: none; /* 使高亮区域不阻碍鼠标事件 */
      transform: translate(-50%, -50%); /* 将中心对准鼠标 */
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    这里是一个可以高亮的区域
  </div>

  <script>
    const container = document.getElementById('container');

    // 创建高亮效果的元素
    const highlightDiv = document.createElement('div');
    highlightDiv.classList.add('highlight');
    container.appendChild(highlightDiv);

    // 当鼠标在容器内移动时，更新高亮区域的位置
    container.addEventListener('mousemove', (e) => {
      const rect = container.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;

      highlightDiv.style.left = `${mouseX}px`;
      highlightDiv.style.top = `${mouseY}px`;
    });

    // 当鼠标离开容器时，隐藏高亮区域
    container.addEventListener('mouseleave', () => {
      highlightDiv.style.display = 'none';
    });

    // 当鼠标进入容器时，显示高亮区域
    container.addEventListener('mouseenter', () => {
      highlightDiv.style.display = 'block';
    });
  </script>
</body>
</html>

代码解释

container: 这是高亮效果的容器。当鼠标在容器内移动时，会显示高亮效果。
.highlight:
- 使用 position: absolute 使其能够相对于父容器定位。
- width 和 height 控制高亮区域的大小。
- background: radial-gradient(circle, rgba(255, 255, 0, 0.5) 0%, rgba(255, 255, 0, 0) 60%) 这是一个径向渐变，中心为半透明黄色，向外渐变到完全透明。你可以调整渐变的颜色和透明度，以实现不同的效果。
- pointer-events: none 确保高亮区域不会阻止鼠标事件传递到它下面的元素。
- transform: translate(-50%, -50%) 确保渐变的中心位于鼠标所在的位置。
JavaScript 逻辑:
- 创建一个 highlightDiv，用来显示渐变高亮效果。
- 使用 mousemove 事件监听鼠标的移动，并根据鼠标的位置动态更新高亮区域的位置。
- 使用 mouseenter 和 mouseleave 事件来控制高亮区域的显示和隐藏。