摘要 今天小编跟大家讲解下有关利用CSS变量实现炫酷的悬浮效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS变量实现炫

今天小编跟大家讲解下有关利用CSS变量实现炫酷的悬浮效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS变量实现炫酷的悬浮效果 的相关资料，希望小伙伴们看了有所帮助。

最近 我从 Grover网站上发现以一个好玩儿的悬停动画 这个动画是将鼠标移动到订阅按钮上移动光标 会跟随光标实现相应的彩色渐变。

这个想法很简单 但是它能使这个按钮脱颖而出 人们一下子就注意到它了 增加了点击的概率。

怎样才能达到这个效果 使我们的网站脱颖而出呢 其实 它并不像我们想象的那么难！

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

js代码：

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',`${y}px`)}

1、选择元素 等待 直到用户将鼠标移过它；

2、计算相对于元素的位置；

3、将坐标存在css的变量中。

仅仅9行代码就让你能获知用户放置鼠标的位置 通过这个信息你能达到意想不到的效果 但是我们还是先来完成css部分的代码。

动画渐变

我们先将坐标存储在css变量中 以便能够随时使用它们。

.button{position:relative;appearance:none;background:#f72359;padding:1em2em;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(circleclosest-side,#4405f7,transparent);transform:translate(-50%,-50%);transition:width.2sease,height.2sease;}&:hover::before{--size:400px;}}

1、用span包裹文本 以避免显示在按钮的上方。

2、将width和height初始化为0px 当用户悬停在按钮上时 将其改为400px。不要忘了设置这种转换以使其像风一样瞬间出现；

3、利用坐标追踪鼠标位置；

4.在background属性上应用radial-gradient 使用closest-side circle。Closest-side能够覆盖整个面。

结果

成功！将其加入到对应的html页面 你炫酷的按钮就可以使用啦！

来源：爱蒂网