前言

前几天我们学习了变量，并通过变量画了两种不同风格的进度条，今天呢，我们再来实现一个有意思的东西 -- 悬浮跟踪按钮，好了，废话不多说，开始。

悬浮跟踪按钮

实现之前，我们要先了解三个 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！！！

CSS之变量（四）悬浮跟踪按钮

前言

悬浮跟踪按钮

代码实现