Vue<文字探照灯效果>

效果图：

move.gif
此篇文章用到了 SVG + TweenLite + clip-path 主要知识点，不明白 TweenLite 的话可以查看之前的文章~~ 👌

若出现报错问题，请下载老版本的gsap

 "gsap": "^2.1.3",

代码如下：

<template>
  <div class="overall">
    <div class="text-box">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <svg height="0" width="0">
      <defs>
        <clipPath id="svgTextPath">
          <!-- textLength 文字的长度 此处对应容器的宽度  x y 为横纵坐标位置 -->
          <text x="0" y="180" textLength="700px">learning</text>
          <text x="200" y="300" textLength="250px">vue</text>
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<script>
import { TweenLite } from "gsap";
export default {
  mounted() {
    this.move();
  },
  methods: {
    move() {
      let box = document.querySelector(".text-box");
      let dt = document.querySelectorAll(".dot");
      window.addEventListener("mousemove", function(e) {
        for (let i = 0; i < dt.length; i++) {
          //圆灯相对于 容器的坐标位置
          let x = e.pageX - box.offsetLeft - dt[i].offsetWidth / 2;
          let y = e.pageY - box.offsetTop - dt[i].offsetHeight / 2;
          TweenLite.to(dt[i], i + 0.2, {
            x: x,
            y: y,
            ease: Back.easeOut.config(1.7)
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.text-box {
  width: 700px;
  height: 400px;
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  //引入剪切路径
  clip-path: url(#svgTextPath);
  color: white;
  background: #2fddc6;
  //移动圆灯的样式
  .dot {
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.9;
  }
  .dot:nth-child(1) {
    width: 350px;
    height: 350px;
    background: rgb(30, 207, 148);
    z-index: 8;
    transform: translateX(-175px) translateY(-175px);
  }
  .dot:nth-child(2) {
    width: 500px;
    height: 500px;
    background: rgb(28, 204, 195);
    z-index: 7;
    transform: translateX(-250px) translateY(-250px);
  }
  .dot:nth-child(3) {
    width: 700px;
    height: 700px;
    background: rgb(18, 155, 247);
    z-index: 6;
    transform: translateX(-350px) translateY(-350px);
  }
}
//剪切文字的文字样式 此处的文字颜色取背景色
text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 8rem;
  text-transform: uppercase;
}
</style>