Vue<按钮边框跟随高亮效果>

效果图：

button.gif

不懂 TweenLite可参考之前的文章，此篇文章的新知识点就是 radial-gradient 径向渐变属性，详情可参考https://www.runoob.com/cssref/func-radial-gradient.html
首先安装 gsap，若出现错误，可回退之前旧版本

"gsap": "^2.1.3"

然后引入

import { TweenLite } from "gsap";

可以通过改变 BtnNum 实现多按钮效果

data() {
    return {
      BtnNum: 9
    };
  }

buttons.gif

代码如下:

<template>
  <div class="overall">
    <div class="box">
      <section class="btn" v-for="item in BtnNum" :key="item">
        <span class="text">BUTTON{{item}}</span>
      </section>
    </div>
  </div>
</template>

<script>
import { TweenLite } from "gsap";
export default {
  data() {
    return {
      BtnNum: 1
    };
  },
  mounted() {
    this.moveBtn();
  },
  methods: {
    moveBtn() {
      let dt = document.querySelectorAll(".btn");
      window.addEventListener("mousemove", function(e) {
        for (let i = 0; i < dt.length; i++) {
          //按键的坐标位置
          let x = e.pageX - dt[i].offsetLeft;
          let y = e.pageY - dt[i].offsetTop;
          // console.log(x, y);
          TweenLite.to(dt[i], 1, {
            ease: Back.easeOut.config(1.7),
            // 修改为 rgba(255, 255, 255, 0.5)   为透明白
            backgroundImage: `radial-gradient(100px at ${x}px ${y}px, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0))`
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 350px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.btn {
  width: 100px;
  height: 60px;
  background: #26b5ce;
  margin: 5px;
  padding: 3px;
  box-sizing: border-box;
  .text {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 14px;
    background: #26b5ce;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    &:hover {
      background: rgba(38, 181, 206, 0.486);
      box-shadow: 0 0 10px #6b6b6b inset;
    }
  }
}
</style>