创建一个带有动画效果的圆形div元素，并将其放置在全屏的背景图像中，通过CSS样式和关键帧动画实现元素的移动和透明度变化效果，形成流星的状态。
首先设置body元素的样式，包括背景颜色、宽度、高度、背景图片、背景大小以及溢出隐藏。设置div元素的样式，包括外边距、高度、宽度、背景颜色、圆角半径、阴影效果、旋转角度、定位方式以及动画效果。这里使用了之前定义的关键帧动画run，使div元素具有动画效果。定义div元素的伪元素：:after，用于创建渐变背景效果。然后设置内容为空字符串，显示方式为块级元素，宽度为200像素，高度为4像素，背景图片为从白色到透明的线性渐变，垂直偏移量为2像素。@keyframes run { ... }: 定义一个关键帧动画run，其中包含动画的关键帧规则，设置了动画从0%到100%的变化过程，包括right、top和opacity属性的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
}
body{
background-color: black;
width: 100vw;
height: 100vw;
background-image: url('../rmg/11.webp');
background-size: 100% 100%;
overflow: hidden;
}
div{
margin: 50px;
height: 8px;
width: 8px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.5);
transform: rotate(-30deg);
position:absolute;
animation: run 10s infinite;
}
div::after{
content: "";
display:block;
width: 200px;
height: 4px;
background-image: linear-gradient(to right ,#fff,transparent);
transform: translateY(2px);
}
@keyframes run {
0%{
right:0px;
top: 0px;
opacity: 1;
}
100%{
right:1300px;
top:800px;
opacity: 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
