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

作者：Augus

2021 年 12 月 23 日
本文字数：953 字
阅读完需：约 3 分钟

往期推荐：

「CSS之变量」

「CSS之变量（二）条形加载条」

「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！！！

发布于: 1 小时前阅读数: 5

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

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

前言

悬浮跟踪按钮

代码实现

Augus

评论