CSS 变量实现炫酷鼠标悬浮效果

我最近从 Grover 网站 上的有趣的悬停动画中获得灵感。将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。这个想法很简单，但结果是一个按钮从复位和等待点击中脱颖而出。

那怎样实现类似的效果使我们的网站同样出色呢？很好，它并没有你想象的那么困难！

跟踪位置

我们需要做的第一件事便是跟踪鼠标光标的位置。

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}

1. 选中目标元素并监听用户鼠标划过的事件
2. 计算鼠标相对于该元素的坐标
3. 将坐标保存到 CSS 的变量中

是的，只需要 6 行代码就可以让你的 CSS 知道用户鼠标的位置。通过这些信息你可以实现更多更庞大的效果。但是让我们先实现 CSS 部分……

为渐变设置动画效果

我们已经将鼠标坐标存储在 CSS 变量中，所以可以在 CSS 中的任何地方使用它们。

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}

1. 将文本包裹在一个 span 中，防止渐变层覆盖到文字上方
2. 初始 width 和 height 为 0px 并且当鼠标悬浮在按钮上时将它们增加到 400px 。不要忘记设置 transition 让它有个渐入的效果
3. 使用 JS 中设置坐标跟随鼠标
4. 应用一个 radial-gradient 到 background 上并使用 closest-side circle 。 closest-side 使得 background 充满整个 before 但又没有超出它。

完整源码

html：

<button class="button">
  <span>Hover me I'm awesome</span>
</button>

css：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: white;
}

.button {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}

.button span {
  position: relative;
  pointer-events: none;
}

.button::before {
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

.button:hover::before {
  --size: 400px;
}

js：

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}

图示

拓展

只需对鼠标的位置作出反应，即可建立如此多的效果。它非常华丽并且使得