css代码做流星雨 |字体上下对齐css

// 创建并定义animation动画
@keyframes shooting-star {
0% {
opacity: 0;
transform: translateY(-200%) rotate(-45deg);
}
60%, 80% {
opacity: 1;
transform: translateY(0%) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(200%) rotate(45deg);
}
}
// 定义流星的样式
.star {
width: 20px;
height: 2px;
background: #fff;
position: absolute;
pointer-events: none;
}
// 定义流星的起点和终点位置
.star.start-point {
top: -10px;    //流星出现位置
left: 20%;     //流星出现位置
}
.star.end-point {
top: 60%;     //流星消失位置
left: 80%;    //流星消失位置
}
// 把流星造型起点和终点位置连结成一条线
.star-span {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 50%, #fff 50%);
}
// 注：这里的transparent，表示颜色为空色，即网页内容显示的背景色。
// 为流星添加animation动画
.star:before {
content: "";
display: block;
width: 10px;
height: 10px;
top: -5px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff;
position: absolute;
animation: shooting-star 3s linear infinite;
transform: rotate(-45deg);
}

有了以上代码的实现，大家就可以愉快的看着流星划过天空，令人心旷神怡。CSS真是一个非常神奇的技能，不仅可以帮助大家实现很多想象不到的效果，而且还可以留下美好回忆！