纯css写一个流星雨效果
**其实这个效果实现起来也特别的简单 代码不多，但是呢涉及的知识点还是不少的，主要是看css基本功扎不扎实，实现的方式也很多 代码如下 感兴趣的小伙伴可以尝试一下！**
HTML部分：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流星划过天际</title>
<link rel="stylesheet" href="meteor.css">
</head>
<body>
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
```
css部分：
```
*{
margin: 0px;
padding: 0px;
}
span{
height: 4px;
width: 4px;
background-color: white;
position: absolute;
left: 50%;
top:50%;
border-radius: 50%;
animation: animates 5s infinite linear;
}
//由于是纯css实现 这一步相对基本都是重复代码 目的是给流星设置不同的坐标
span:nth-child(1){
top:0;
right: 0;
left: initial;
animation-delay: 0s;
animation-duration: 1s;
}
span:nth-child(2){
top:0;
right: 80px;
left: initial;
animation-delay: 0.25s;
animation-duration: 1.25s;
}
span:nth-child(3){
top:0;
right: 160px;
left: initial;
animation-delay: 0.5s;
animation-duration: 1.5s;
}
span:nth-child(4){
top:0;
right: 240px;
left: initial;
animation-delay: 0.75s;
animation-duration: 1.75s;
}
span:nth-child(5){
top:0;
right: 300px;
left: initial;
animation-delay: 1s;
animation-duration: 2s;
}
span:nth-child(6){
top:0;
right: 360px;
left: initial;
animation-delay: 1.25s;
animation-duration: 2.25s;
}
span:nth-child(7){
top:0;
right: 420px;
left: initial;
animation-delay: 1.5s;
animation-duration: 2.5s;
}
span:nth-child(8){
top:0;
right: 480px;
left: initial;
animation-delay: 1.75s;
animation-duration: 2.75s;
}
span:nth-child(9){
top:0;
right: 560px;
left: initial;
animation-delay: 2s;
animation-duration: 3s;
}
span:nth-child(10){
top:0;
right: 650px;
left: initial;
animation-delay: 2.25s;
animation-duration: 3.25s;
}
//用伪元素给流星实现拖尾效果
span::after {
content: '';
position: absolute;
top: 50%;
width: 300px;
height: 2px;
background: linear-gradient(90deg,#fff,transparent) ;
transform: translateY(-50%);
}
.container{
position: absolute;
width: 100vw;
height: 100vh;
background: url("xuehua.png") no-repeat;
background-size: cover;
animation: images 5s infinite linear;
}
//背景缩放动画
@keyframesimages{
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
//流星滑落动画
@keyframes animates {
0%{
transform: rotate(315deg) translateX(0);
opacity: 1;
}90%{
opacity: 1;
}
100%{
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
}
}
```
页:
[1]