[译]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变量中

是的，只要9行代码让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. 从宽度和高度的0px开始，在用户悬停按钮时将它变为到400px。但记得设置一个过渡，使它像旋风似的
3. 使用坐标来跟随鼠标
4. 在整个::before，background使用radial-gradient以及circle closest-side。

结果

把它添加到html

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

效果如上图所示。

问题与解答

为什么对宽度和高度添加动画而不是使用transform:scale()？

对宽度和高度添加动画性能是很差的，应该尽可能使用transform。 那为什么我不这样做呢？ 问题在于浏览器在加速图层中渲染元素（正在转换）。 当按钮是非矩形边缘时，此图层可能会导致问题。

编辑：有使用transform的方法，但有些浏览器不喜欢它。 不使用transform来转换也是一种可能的解决方案。 Safari还有一个解决方法可以解决这些剪辑问题。

为什么改变top和left而不是使用transform:translate()？

见上面的解释。

原文：Stunning hover effects with CSS variables

注释：原文还提了两种其他的效果，这两种效果是在youtube上演示，有兴趣可以查看原文。