流星特效案例代码

实际效果，代码下载即可使用

 流星图片

 

<!--

 描述: 流星特效

 作者: Jack GUO

 日期: 20230727

-->

<template>

  <div class="wrap-container sn-container">

    <div class="pd-main-left">

      <div class="yun-container">

        <div class="yun-tree"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

        <div class="line-fs"></div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "flashCloud",

  data() {

    return {

    }

  },

  mounted() {

  },

  methods: {

  },

  beforeDestroy() {

  }

};

</script>

<style lang="scss" scoped>

.wrap-container {

  position: absolute;

  overflow: hidden;

  display: block;

  cursor: default;

  z-index: 0;

  left: 0;

  top: 0;

  width: 500px;

  height: 300px;

  background-color: black;

}

.sn-container {

  left: 512px;

  top: 78px;

  width: 432px;

  height: 400px;

  .pd-main-left {

    position: relative;

    width: 310px;

    height: 335px;

    transform: rotate(45deg);

    .yun-container {

      width: 100%;

      height: 100%;

      >div {

        &:nth-child(2) {

          height: 90%;

          -webkit-animation-duration: 2s;

          -moz-animation-duration: 2s;

          -o-animation-duration: 2s;

          animation-duration: 2s;

          -webkit-animation-delay: 1.5s;

          -moz-animation-delay: 1.5s;

          -o-animation-delay: 1.5s;

          animation-delay: 1.5s;

          bottom: 0;

          left: 51px;

        }

        &:nth-child(3) {

          height: 100%;

          -webkit-animation-duration: 3s;

          -moz-animation-duration: 3s;

          -o-animation-duration: 3s;

          animation-duration: 3s;

          -webkit-animation-delay: 0s;

          -moz-animation-delay: 0s;

          -o-animation-delay: 0s;

          animation-delay: 0s;

          bottom: 32px;

          left: 89px;

        }

        &:nth-child(4) {

          height: 100%;

          -webkit-animation-duration: 2.5s;

          -moz-animation-duration: 2.5s;

          -o-animation-duration: 2.5s;

          animation-duration: 2.5s;

          -webkit-animation-delay: 1s;

          -moz-animation-delay: 1s;

          -o-animation-delay: 1s;

          animation-delay: 1s;

          bottom: 3px;

          left: 179px;

          -webkit-filter: hue-rotate(180deg);

          filter: hue-rotate(180deg);

        }

        &:nth-child(5) {

          height: 90%;

          -webkit-animation-duration: 2s;

          -moz-animation-duration: 2s;

          -o-animation-duration: 2s;

          animation-duration: 2s;

          -webkit-animation-delay: 2s;

          -moz-animation-delay: 2s;

          -o-animation-delay: 2s;

          animation-delay: 2s;

          bottom: 42px;

          left: 229px;

        }

        &:nth-child(6) {

          height: 100%;

          -webkit-animation-duration: 2.5s;

          -moz-animation-duration: 2.5s;

          -o-animation-duration: 2.5s;

          animation-duration: 2.5s;

          -webkit-animation-delay: 0.5s;

          -moz-animation-delay: 0.5s;

          -o-animation-delay: 0.5s;

          animation-delay: 0.5s;

          bottom: 11px;

          right: 48px;

        }

        &:nth-child(7) {

          height: 90%;

          -webkit-animation-duration: 3s;

          -moz-animation-duration: 3s;

          -o-animation-duration: 3s;

          animation-duration: 3s;

          -webkit-animation-delay: 2.5s;

          -moz-animation-delay: 2.5s;

          -o-animation-delay: 2.5s;

          animation-delay: 2.5s;

          bottom: -22px;

          right: 174px;

          -webkit-filter: hue-rotate(180deg);

          filter: hue-rotate(180deg);

        }

        &:nth-child(8) {

          height: 90%;

          -webkit-animation-duration: 3s;

          -moz-animation-duration: 3s;

          -o-animation-duration: 3s;

          animation-duration: 3s;

          -webkit-animation-delay: 1.5s;

          -moz-animation-delay: 1.5s;

          -o-animation-delay: 1.5s;

          animation-delay: 1.5s;

          bottom: -22px;

          right: 100px;

        }

        &:nth-child(9) {

          height: 100%;

          -webkit-animation-duration: 2.5s;

          -moz-animation-duration: 2.5s;

          -o-animation-duration: 2.5s;

          animation-duration: 2.5s;

          -webkit-animation-delay: 2s;

          -moz-animation-delay: 2s;

          -o-animation-delay: 2s;

          animation-delay: 2s;

          bottom: -10px;

          right: 220px;

        }

        &:nth-child(10) {

          height: 95%;

          -webkit-animation-duration: 2s;

          -moz-animation-duration: 2s;

          -o-animation-duration: 2s;

          animation-duration: 2s;

          -webkit-animation-delay: 1s;

          -moz-animation-delay: 1s;

          -o-animation-delay: 1s;

          animation-delay: 1s;

          bottom: -41px;

          right: 182px;

        }

      }

      .yun-tree {

        width: 100%;

        height: 100%;

        mix-blend-mode: screen;

      }

      .line-fs {

        width: 14px;

        height: 100%;

        background-image: url(../../assets/line-fs.png);

        background-repeat: no-repeat;

        background-position: 50% 150%;

        position: absolute;

        z-index: -1;

        -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;

        -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;

        -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;

        animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;

      }

    }

  }

}

@-webkit-keyframes fs {

  0% {

    background-position: 50% 150%;

  }

  50% {

    background-position: 50% -132%;

  }

  100% {

    background-position: 50% -264%;

    opacity: 0;

  }

}

@-moz-keyframes fs {

  0% {

    background-position: 50% 150%;

  }

  50% {

    background-position: 50% -132%;

  }

  100% {

    background-position: 50% -264%;

    opacity: 0;

  }

}

@-o-keyframes fs {

  0% {

    background-position: 50% 150%;

  }

  50% {

    background-position: 50% -132%;

  }

  100% {

    background-position: 50% -264%;

    opacity: 0;

  }

}

@keyframes fs {

  0% {

    background-position: 50% 150%;

  }

  50% {

    background-position: 50% -132%;

  }

  100% {

    background-position: 50% -264%;

    opacity: 0;

  }

}

</style>