css流星雨背景 |css 省略隐藏

/*
 * 流星雨背景
 */
body {
background: #000 url(https://cdn.jsdelivr.net/gh/lmfres/static/img/meteor.png) repeat;
background-position: top center; 
background-attachment: fixed;
}
/* 关键帧动画 */
@keyframes meteor {
from {
opacity: 1;
transform: translateY(-500px) rotate(20deg) scale(1); 
/* opacity：不透明度，初始为1 */
/* translateY：从上向下移动500px */
/* rotate：参数20deg为角度，使得流星略带倾斜 */
/* scale：大小为原始大小 */
}
to {
opacity: 0;
transform: translateY(1000px) rotate(-20deg) scale(0.2); 
/* opacity：不透明度，结束为0 */
/* translateY：移动到1000px，此时流星离视口消失 */
/* rotate：反转20度 */
/* scale：缩小到原来的0.2 */
}
}
/* 流星的样式 */
.meteor {
position: absolute;
top: -500px; 
/* 初始为负数，使得流星在上方消失的时候可以顺滑出现 */
left: 50%;
transform: rotate(-20deg); 
/* 使得流星略带倾斜 */
opacity: 0;
/* opacity：初始为0，流行出现的时候缓慢淡入 */
}
/* 流星的图片 */
.meteor img {
width: 100px;
height: 20px; 
/* 根据实际图片的大小设置 */
}
/* 生成流星 */@for $i from 1 through 10 {
.meteor:nth-child(#{$i}) {
top: #{random(1000)}px;animation: meteor #{random(10)}s ease-in-out infinite;
left: #{random(100)}%;}
}
/* 工具函数 */
@function random($i) {
@return random($i);
}

以上是使用 CSS 制作流星雨背景的示例代码，可以通过复制代码到您的项目中进行实践，实现流星雨背景这一酷炫的效果。