css 流星雨效果
项目需要，根据UI提供的参考代码修改整理，在此和大家分享！
<!--流星雨-->
<template>
<div class="window" >
<div class="stars" v-for="item in 2" :key="item">
<div class="star" v-for="star in 30" :key="`${star}star`"></div>
<div class="shooting" v-for="shoot in 250" :key="`${shoot}shoot`"></div>
</div>
</div>
</template>
<style scoped lang="scss">
.window {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(-45deg, #0a1433 0%,#222b3f 100%);
overflow: hidden;
z-index:0;
}
.star {
position: absolute;
width: 1px;
height: 1px;
@for $i from 1 through 250 {
$light: random(255);
&:nth-child(#{
$i}) {
top: random(100) + 0%;
left: random(100) + 0%;
background: rgb($light, $light, $light);
}
}
}
.stars {
position: absolute;
width: 100%;
height: 100%;
animation: slide 30000ms linear infinite;
&:nth-child(2) {
left: 100%;
}
}
.shooting {
position: absolute;
width: 50px;
height: 1px;
background: linear-gradient(90deg, rgba(#fff, 1), rgba(#fff, 0));
background: linear-gradient(90deg, rgba(#0093E9, 1) 0%, rgba(#80D0C7, 0) 100%);
opacity: 0;
animation: shooting 5000ms linear infinite;
@for $i from 1 through 50 {
&:nth-child(#{
$i}) {
top: random(100) + 0%;
left: random(100) + 0%;
animation-delay: random(9999) * 1ms;
}
}
}
@keyframes shooting {
0% {
opacity: 0;
transform: rotateZ(-30deg) translateX(0) scaleX(0);
}
25% {
opacity: 1;
transform: rotateZ(-30deg) transalteX(-200%) scaleX(1);
}
50% {
opacity: 0;
transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
}
100% {
opacity: 0;
transform: rotateZ(-30deg) translateX(-400%) scaleX(2);
}
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
代码参考：https://codepen.io/YusukeNakaya/pen/abNdeOj