html流星雨代码如何实现

html>




一起来看流星雨吧！--(●∀●)

:root{
--background-color:#2c3e50;
--border-color:#7591AD;
--text-color:#34495e;
--color1:#ec3e27;
--color2:#fd79a8;
--color3:#0984e3;
--color4:#00b894;
--color5:#fdcb6e;
--color6:#e056fd;
--color7:#F97F51;
--color8:#BDC581;
}
*{
margin:0;
padding:0;
}
html{
font-size:14px;
}
body{
width:100vw;
height:100vh;
background-color:var(--background-color);
display:flex;
justify-content:center;
align-items:center;
/*font-family:'免费云主机、域名TimesNewRoman',Times,serif;*/
}
.channel{
position:absolute;
width:80%;
text-align:center;
top:50%;
left:50%;
transform:translate(-50%,-200px);
font-size:30px;
font-weight:bold;
color:#fff;
z-index:999;
}
.container{
position:relative;
width:100vw;
height:100vh;
background-color:#000;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
perspective:800px;
/*perspective-origin:leftbottom;*/
transform-style:preserve-3d;
}
.line{
position:absolute;
width:200px;
height:3px;
border-radius:3px;
/*background-color:#fff;*/
background-image:linear-gradient(toright,var(--color),#ffffff50,transparent);
animation:down1slinearinfiniteboth;
animation-delay:calc(var(--d)*0.3s);
}
.line::before,
.line::after{
position:absolute;
content:"";
width:inherit;
height:inherit;
background-image:inherit;
}
.line::before{
filter:blur(5px);
}
.line::after{
filter:blur(10px);
}
@keyframesdown{
0%{
transform:translateY(calc(var(--z)*60px))
translateZ(calc(var(--z)*100px))
rotate(-45deg)
translateX(calc(var(--x)*100px));
}
100%{
transform:translateY(calc(var(--z)*60px))
translateZ(calc(var(--z)*100px))
rotate(-45deg)
translateX(calc(var(--x)*-100px));
}
}
.channel{
background:linear-gradient(toright,red,blue);
-webkit-background-clip:text;
color:transparent;
}