屏幕中的流星效果
具体代码:
<!--在<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;}}
图片素材：
