用CSS来实现一些动画在vue中使用之流星滑过（3）

屏幕中的流星效果

具体代码:

<!--在<template>添加-->
<!--流星-->
    <div class="liuxing liuxing1 liuxingFla"></div>
    <div class="liuxing liuxing2 liuxingFla2"></div>
    <div class="liuxing liuxing3 liuxingFla3"></div>
    <div class="liuxing liuxing4 liuxingFla4"></div>

/*在<style>中添加*/
/*流星*/
.liuxing{
  width: 85px;
  height: 85px;
  position: absolute;
  background: url(../../assets/line.png) no-repeat;
  background-size: contain;
}
.liuxing1 {
  top: 200px;
  left: 200px;
}
.liuxing2 {
  top: 200px;
  left: 50%;
  margin-left: 200px;
}
.liuxing3 {
  top: 100px;
  right: 300px;
}
.liuxing4 {
  top: 150px;
  right: 300px;
}
.liuxingFla {
  animation: liuxing 5s ease-in infinite;
}
.liuxingFla2 {
  animation: liuxing2 4s ease-in infinite;
}
.liuxingFla3 {
  animation: liuxing3 3s linear infinite;
}
.liuxingFla4 {
  animation: liuxing4 2s linear infinite;
}
/* 流星动画 */
@keyframes liuxing {
  0% {
    transform: translate(200px, -200px)
  }
  90% {
    transform: translate(-180px, 180px);
    opacity: 1;
  }
  100% {
    transform: translate(-200px, 200px);
    opacity: 0;
  }
}

@keyframes liuxing2 {
  0% {
    transform: translate(200px, -200px)
  }
  90% {
    transform: translate(-480px, 480px);
    opacity: 1;
  }
  100% {
    transform: translate(-500px, 500px);
    opacity: 0;
  }
}

@keyframes liuxing3 {
  0% {
    transform: translate(200px, -200px)
  }
  90% {
    transform: translate(-480px, 480px);
    opacity: 1;
  }
  100% {
    transform: translate(-500px, 500px);
    opacity: 0;
  }
}
@keyframes liuxing4 {
  0% {
    transform: translate(200px, -200px)
  }
  90% {
    transform: translate(-180px, 180px);
    opacity: 1;
  }
  100% {
    transform: translate(-200px, 200px);
    opacity: 0;
  }
}

图片素材：