发布于 1年前
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`)
}
- 选择元素等待用户把鼠标在它上面移动
- 计算相对于元素的位置
- 将坐标保存在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;
}
}
- 使用span放置文本，避免渐变出现在它的上方
- 从宽度和高度的0px开始，在用户悬停按钮时将它变为到400px。但记得设置一个过渡，使它像旋风似的
- 使用坐标来跟随鼠标
- 在整个::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()？
见上面的解释。
