vue3数据大屏开发时，为了让页面更酷炫，会增加很多动画效果，这一次我们使用 gsap补间动画 插件来实现一个4个角向中间汇聚的效果。

项目演示

vue3 数据可视化大屏智能科技登录页

效果描述

根据设计图来看当前边框有4个角标的效果，我们给这4个角标增加一个动画，从透明到不透明，从四周到中间的效果。

实现代码

/**
* @Author: 858834013@qq.com
* @Name: cornerMark
* @Date: 2023年04月14日
* @Desc: 角标动画效果
*/
<template>
  <div class="cornerMark">
    <img ref="icon_leftTop" class="icon_leftTop" src="../assets/icon_leftTop.png" alt="">
    <img ref="icon_rightTop" class="icon_rightTop" src="../assets/icon_rightTop.png" alt="">
    <img ref="icon_leftBottom" class="icon_leftBottom" src="../assets/icon_leftBottom.png" alt="">
    <img ref="icon_rightBottom" class="icon_rightBottom" src="../assets/icon_rightBottom.png" alt="">
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: "cornerMark",
  components: {},
  props: {},
  data() {
    return {
      delay: 1.5,
      duration: 1
    }
  },
  watch: {},
  mounted() {
    gsap.fromTo(this.$refs.icon_leftTop, {
      top: -20,
      left: -20,
    }, {
      duration: this.duration,
      delay: this.delay,
      top: -1,
      left: -1,
      opacity: 1
    });
    gsap.fromTo(this.$refs.icon_rightTop, {
      top: -20,
      right: -20,
    }, {
      duration: this.duration,
      delay: this.delay,
      top: -1,
      right: -1,
      opacity: 1
    });
    gsap.fromTo(this.$refs.icon_rightBottom, {
      bottom: -20,
      right: -20,
    }, {
      duration: this.duration,
      delay: this.delay,
      bottom: -1,
      right: -1,
      opacity: 1
    });
    gsap.fromTo(this.$refs.icon_leftBottom, {
      bottom: -20,
      left: -20,
    }, {
      duration: this.duration,
      delay: this.delay,
      bottom: -1,
      left: -1,
      opacity: 1
    });
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.cornerMark {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;

  .icon_leftTop {
    position: absolute;
    opacity: 0;
    top: -20px;
    left: -20px;
  }

  .icon_rightTop {
    position: absolute;
    opacity: 0;
    top: -20px;
    right: -20px;
  }

  .icon_leftBottom {
    position: absolute;
    opacity: 0;
    bottom: -20px;
    left: -20px;
  }

  .icon_rightBottom {
    position: absolute;
    opacity: 0;
    bottom: -20px;
    right: -20px;
  }
}
</style>