Anime+Vue<极光效果>

效果图：

light.gif

代码如下：

<template>
  <div class="body">
    <div class="light_box">
      <div class="light" v-for="(i,index) in 10" :key="index"></div>
    </div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.es.js";
export default {
  mounted() {
    let lights = document.querySelectorAll(".light");
    for (let i = 0; i < lights.length; i++) {
      anime({
        targets: lights[i],
        duration: 1000, //动画时间
        scaleY: 1.4,
        delay: i * 100,
        direction: "alternate",
        easing: "linear",
        loop: true //执行次数 true 为无限次
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #00091a;
}
.light_box {
  width: 100%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  transform-origin: 50% 0;
  transform: rotate(20deg);
  .light {
    flex-grow: 1;
    height: 100%;
    transform-origin: 50% 0;
    filter: blur(75px);
    background-image: linear-gradient(
      0deg,
      transparent,
      hsla(100, 100%, 50%, 0.13) 10%,
      transparent,
      hsla(147, 100%, 50%, 0.48) 40%,
      transparent,
      hsla(219, 100%, 50%, 0.58) 60%
    );
    // background-image: linear-gradient(
    //   0deg,
    //   transparent,
    //   hsla(295, 100%, 50%, 0.13) 10%,
    //   transparent,
    //   hsla(288, 100%, 50%, 0.48) 40%,
    //   transparent,
    //   hsla(345, 100%, 50%, 0.58) 60%
    // );
  }
}
</style>