html+css实现流星雨功能代码
时间: 2024-01-07 11:05:49 浏览: 287
以下是一个简单的HTML和CSS实现流星雨效果的示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>流星雨效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</body>
</html>
```
CSS:
```
body {
background-color: #000;
}
.star {
position: absolute;
width: 2px;
height: 10px;
background-color: #fff;
box-shadow: 0 0 2px #fff;
animation: shooting-star 1s ease-in-out infinite;
}
.star:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0.5s;
}
.star:nth-child(2) {
top: 50%;
left: 20%;
animation-delay: 1.5s;
}
.star:nth-child(3) {
top: 80%;
left: 30%;
animation-delay: 2.5s;
}
.star:nth-child(4) {
top: 10%;
left: 40%;
animation-delay: 3.5s;
}
.star:nth-child(5) {
top: 40%;
left: 50%;
animation-delay: 4.5s;
}
.star:nth-child(6) {
top: 70%;
left: 60%;
animation-delay: 5.5s;
}
.star:nth-child(7) {
top: 25%;
left: 70%;
animation-delay: 6.5s;
}
.star:nth-child(8) {
top: 60%;
left: 80%;
animation-delay: 7.5s;
}
.star:nth-child(9) {
top: 90%;
left: 90%;
animation-delay: 8.5s;
}
.star:nth-child(10) {
top: 15%;
left: 80%;
animation-delay: 9.5s;
}
@keyframes shooting-star {
0% {
transform: translateX(0) translateY(0);
opacity: 1;
}
100% {
transform: translateX(500px) translateY(500px);
opacity: 0;
}
}
```
这段代码会在页面上生成10个星星元素,并使用CSS动画实现流星雨效果。每个星星都有不同的起始位置和延迟时间,使得它们看起来像是从不同的方向飞来。动画的关键帧使用transform属性在水平和垂直方向上移动星星元素,并在100%时将其透明度设置为0,使其消失。
阅读全文