CSS3-流星雨

1. 绘制标签

<div class="container"><span></span>
</div>

2. 设置div背景

在百度上搜索一幅星空的图片

<style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.container {background: url(xk1.jpg) no-repeat;width: 100%;height: 100%;position: absolute;/* 把背景图像扩展到足够大，使背景图像覆盖背景区域 */background-size: cover;/* 背景图像设置为正中间 */background-position: center;}
</style>

在这里插入图片描述

3. 绘制流星和尾巴

span {width: 10px;height: 10px;background-color: #fff;position: absolute;left: 50%;top: 50%;/* 圆角 */border-radius: 50%;/* 发光效果 0 x轴方向的长度0 y轴方向的长度10 阴影模糊度,只能为正数4  阴影的扩散半径				*/box-shadow: 0px 0 10px 4px rgba(255, 255, 255, 1);}span::before {content: "";width: 300px;height: 3px;/* 渐变背景 90度，由#fff 向完全透明渐变 */background: linear-gradient(90deg, #fff, transparent);position: absolute;top: 50%;
}

在这里插入图片描述

4. 添加背景缩放的动画

/* 定义动画 ,背景缩放*/
@keyframes animateBg {0%,100% {transform: scale(1);}50% {transform: scale(1.2);}
}

添加动画到 .container 的样式中
在这里插入图片描述

5. 流星动画

@keyframes animateLx {0% {/* 角度旋转315度，x方向移动0px */transform: rotate(315deg) translateX(0);opacity: 1;}90% {opacity: 1;}100% {/* 角度旋转315度，x方向移动-1000px 向左边移动 */transform: rotate(315deg) translateX(-1000px);opacity: 0;}
}

添加动画到span标签上
在这里插入图片描述

6. 为第一个span单独设置动画出现的位置，和动画效果

span:nth-child(1) {top: 0px;left: initial;right: 0px;/* 动画延迟时间 */animation-delay: 0s;/* 动画时长 */animation-duration: 1s;
}

请添加图片描述

7. 为第二个span单独设置动画出现的位置，和动画效果

span:nth-child(2) {top: 0px;right: 80px;left: initial;animation-delay: 0.1s;animation-duration: 3s;
}

在这里插入图片描述

请添加图片描述

8. 后续

每添加一个标记，就添加一个对应的样式，通过改变top ，right ，动画延时，动画时长等参数，生成不同的流星

请添加图片描述

9. 完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>流星雨划过天际的动画</title><style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.container {background: url(xk1.jpg) no-repeat;width: 100%;height: 100%;position: absolute;/* 把背景图像扩展到足够大，使背景图像覆盖背景区域 */background-size: cover;/* 背景图像设置为正中间 */background-position: center;/* 执行动画，时长，线性的，无限次数播放 */animation: animateBg 5s linear infinite;}span {width: 10px;height: 10px;background-color: #fff;position: absolute;left: 50%;top: 50%;/* 圆角 */border-radius: 50%;/* 发光效果 0 x轴方向的长度0 y轴方向的长度10 阴影模糊度,只能为正数4  阴影的扩散半径				*/box-shadow: 0px 0 10px 4px rgba(255, 255, 255, 1);animation: animateLx 3s linear infinite;}span::before {content: "";width: 300px;height: 3px;/* 渐变背景 90度，由#fff 向完全透明渐变 */background: linear-gradient(90deg, #fff, transparent);position: absolute;top: 50%;}/* 定义动画 ,背景缩放*/@keyframes animateBg {0%,100% {transform: scale(1);}50% {transform: scale(1.2);}}@keyframes animateLx {0% {transform: rotate(315deg) translateX(0);opacity: 1;}90% {opacity: 1;}100% {transform: rotate(315deg) translateX(-1000px);opacity: 0;}}span:nth-child(1) {top: 0px;right: 0px;left: initial;/* 动画延迟时间 */animation-delay: 0s;/* 动画时长 */animation-duration: 1s;}span:nth-child(2) {top: 0px;right: 80px;left: initial;animation-delay: 0.1s;animation-duration: 3s;}span:nth-child(3) {top: 80px;right: 0px;left: initial;animation-delay: 0.4s;animation-duration: 2s;}span:nth-child(4) {top: 0px;right: 10px;left: initial;animation-delay: 0.7s;animation-duration: 2s;}span:nth-child(5) {top: 0px;right: 400px;left: initial;animation-delay: 0.8s;animation-duration: 2.5s;}span:nth-child(6) {top: 0px;right: 600px;left: initial;animation-delay: 1s;animation-duration: 3s;}span:nth-child(7) {top: 300px;right: 0px;left: initial;animation-delay: 1.2s;animation-duration: 1.75s;}span:nth-child(8) {top: 0px;right: 700px;left: initial;animation-delay: 1.4s;animation-duration: 1.25s;}span:nth-child(9) {top: 0px;right: 1000px;left: initial;animation-delay: 0.75s;animation-duration: 2.25s;}span:nth-child(10) {top: 0px;right: 450px;left: initial;animation-delay: 2.75s;animation-duration: 2.25s;}</style></head><body><div class="container"><!--10个span--><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body>
</html>