companyManagement项目home主页开发，使用热门gsap库开发炫酷2d动画

代码如下（示例）：

<template>
  <div id="home">
    <div class="container">
      <div class="welcome">
        <p>
          <a href="https://en.wikipedia.org/wiki/Red">Welcome</a>
        </p>
      </div>
      <div class="loader-wrapper">
        <div class="loader-1"></div>
        <div class="loader-2"></div>
        <div class="loader-3"></div>
      </div>
      <div class="secret">我摊牌了，我没有秃但是也变强了</div>
    </div>
  </div>
</template>
<script>
import { TweenMax, gsap } from "gsap";
import headerNav from "../../components/headerNav";
export default {
  name: "home",
  components: { headerNav },
  data() {
    return {};
  },
  mounted() {
    this.loadding();
  },
  methods: {
    loadding() {
      const loader = gsap.timeline();
      const duration = 0.25;
      const delay = 1;
      loader
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", {
          rotate: 90,
          transformOrigin: "45px 45px",
          marginLeft: 0,
        })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "72px 17px", rotate: 270 })
        .to(".loader-2", duration, { width: 35 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "45px 17.5px", rotate: 180 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", { transformOrigin: "45px 45px", rotate: 180 })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "bottom center", marginTop: 20 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", { transformOrigin: "45px 45px", rotate: 90 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "72px 17.5px", rotate: 270 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", { rotate: 360 })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "45px 17.5px", rotate: 180 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", { transformOrigin: "45px 45px", rotate: 180 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "bottom center", marginTop: 20 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", { transformOrigin: "45px 45px", rotate: 90 })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "72px 17.5px", rotate: 270 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", { transformOrigin: "45px 17.5px", rotate: 0 })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { rotate: 180 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", {
          transformOrigin: "45px 17.5px",
          rotate: 180,
          marginTop: 55,
        })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-2", { marginLeft: 55 })
        .delay(delay)
        .repeat(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
/* Colors */
$background: #f6cb4f;
$theme-black: #0d0d0d;

/* Dimensions */
$loader-wrapper-width: 90px;
$loader-width: 35px;
$loader-height: 35px;
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}
%loader {
  position: absolute;
  width: $loader-width;
  height: $loader-height;
  border: 10px solid $theme-black;
  border-radius: 40px;
}
#home {
  height: 100%;
  width: 100%;
  background: $background;
  /* Specific Styles */
  .container {
    @extend %center;
    height: 100%;
    position: relative;
    .welcome {
      position: absolute;
      top: calc(50% - calc(#{$loader-wrapper-width} / 2) - 300px);
      p {
        text-align: center;
        font-size: 7em;
        margin: 20px 0 20px 0;
        a {
          text-decoration: none;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          transition: all 0.5s;
        }
      }
      p:nth-child(1) a {
        color: #fff;
        font-family: Monoton;
        -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
        -moz-animation: neon1 1.5s ease-in-out infinite alternate;
        animation: neon1 1.5s ease-in-out infinite alternate;
      }
      p:nth-child(1) a:hover {
        color: #ff1177;
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
      }
      p a:hover {
        color: #ffffff;
      }
    }
    .secret {
      position: absolute;
      top: calc(50% - calc(#{$loader-wrapper-width} / 2) + 150px);
    }
  }
  .loader-wrapper {
    display: flex;
    position: absolute;
    top: calc(50% - calc(#{$loader-wrapper-width} / 2));
    left: calc(50% - calc(#{$loader-wrapper-width} / 2));
    width: $loader-wrapper-width;
  }
  .loader-1 {
    @extend %loader;
  }
  .loader-2 {
    @extend %loader;
    margin-left: 55px;
  }
  .loader-3 {
    @extend %loader;
    width: $loader-wrapper-width;
    margin-top: 55px;
  }
}

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
      0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
      0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
  }
}

@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
      0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
      0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
  }
}

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
      0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
      0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
  }
}
@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}
</style>

总结

good