最近在Grover网站上发现了一个很好玩的hover动画，自己也有了一些灵感。此动画将鼠标移到订阅按钮上，移动光标将显示相应的彩色渐变。这个想法很简单，但它使按钮脱颖而出，人们立即注意到它，并增加点击的机会。怎样才能达到这样的效果，让我们的网站脱颖而出呢？其实，没你想的那么难！跟踪位置我们需要做的第一件事是获取鼠标的位置。document.querySelector('.button').onmousemove=(e)=>{constx=e.pageX-e.target.offsetLeftconsty=e.pageY-e.target.offsetTope.target.style.setProperty('--x',`${x}px`)e.target.style.setProperty('--y',`${}px`)}选择元素，等待用户将鼠标移到它上面；计算相对于元素的位置；将坐标存储在CSS变量中。是的，仅仅9行代码就可以让你知道用户把鼠标放在哪里了，利用这些信息你可以达到意想不到的效果，但是让我们先完成代码的CSS部分。为了使渐变动画化，我们首先将坐标存储在CSS变量中，以便我们可以随时使用它们。.button{位置：相对；外观：无；背景：#f72359；填充：1em2em；边框：无；白颜色;字体大小：1.2em；游标：指针；大纲：无；溢出：隐藏；半径：100px；跨度{位置：相对；}&::before{--size:0;内容：'';位置：绝对；左：var(--x)；顶部：var(--y)；:变量(--大小);高度：var(--size)；背景：径向渐变（圆形最近侧，#4405f7，透明）；转换：翻译（-50%，-50%）；过渡：宽度0.2s缓和，高度0.2s缓和；}&:hover::before{--size:400px;}}用span包裹文本以避免显示在按钮上方。将宽度和高度初始化为0px，并在用户将鼠标悬停在按钮上时将它们更改为400px。不要忘记设置此转换，使其像风一样瞬间出现；使用坐标来跟踪鼠标位置；在背景属性上应用径向渐变，并使用最近的圆。最近侧可以覆盖整个表面。结果是成功了！将其添加到相应的HTML页面中，您的炫酷按钮就可以使用了！
