CSS之变量（三）悬浮跟踪按钮
前言
前几天我们学习了变量，并通过变量画了两种不同风格的进度条，今天呢，我们再来实现一个有意思的东西 -- 悬浮跟踪按钮，好了，废话不多说，开始。
悬浮跟踪按钮
实现之前，我们要先了解三个 js 的api：
JS中有3个操作变量的API，看上去简单易记。
读取变量：
element.style.getPropertyValue()设置变量：
element.style.setProperty()删除变量：
element.style.removeProperty()
还是按照惯例，先看效果图：
看完之后，相信你也有一点头绪了，首先，要按照主体布局，其次实现的主要部分就是，根据鼠标的滑动来显示样式。这我们可以通过js获取当前节点的offsetX和offsetY，在计算出 x轴 和 y轴的位置，并设置两个变量，在通过 ：before属性引入变量，来动态设置样式就可以了。
代码实现
<a class="track-btn" @mousemove="move"> <span>忽如一夜春风来, 千树万树梨花开</span> </a> 复制代码
export default { setup() { const move = (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`); } return { move, } } } 复制代码.track-btn { overflow: hidden; position: relative; border-radius: 25px; width: 400px; height: 50px; background-color: black; cursor: pointer; line-height: 50px; text-align: center; font-weight: bold; font-size: 18px; color: #fff; span { position: relative; pointer-events: none; } &::before { --size: 0; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background-image: radial-gradient(circle closest-side, pink, transparent); content: ""; transform: translate3d(-50%, -50%, 0); transition: width 200ms ease, height 200ms ease; } &:hover::before { --size: 400px; } } 复制代码看看是不是很简单，多看几遍，相信你也可以写出来。
好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！
作者：Augus
链接：https://juejin.cn/post/7035990009643532302
伪原创工具 SEO网站优化 https://www.237it.com/