HTML做一个流星雨网页
时间: 2023-12-13 18:04:29 浏览: 55
好的,以下是一个简单的流星雨网页的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流星雨网页</title>
<style>
body {
background-color: black;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.stars:before, .stars:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://cdn.jsdelivr.net/gh/linzhiming0826/CDN/images/stars.png") repeat top center;
}
.stars:after {
background: url("https://cdn.jsdelivr.net/gh/linzhiming0826/CDN/images/stars-2.png") repeat top center;
animation: stars 15s linear infinite;
}
@keyframes stars {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(100%) rotate(360deg);
}
}
.meteor {
position: absolute;
top: -100px;
left: 0;
width: 20px;
height: 20px;
background: url("https://cdn.jsdelivr.net/gh/linzhiming0826/CDN/images/meteor.png") no-repeat center center;
animation: meteor 3s linear infinite, meteor-fade 3s linear infinite;
animation-delay: 0s;
}
.meteor:nth-child(2) {
left: 25%;
width: 30px;
height: 30px;
animation-duration: 4s;
animation-delay: 1s;
}
.meteor:nth-child(3) {
left: 75%;
width: 40px;
height: 40px;
animation-duration: 5s;
animation-delay: 2s;
}
@keyframes meteor {
0% {
transform: translate(0, -100px);
}
100% {
transform: translate(100%, 1000px);
}
}
@keyframes meteor-fade {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
</body>
</html>
```
你可以将这段代码保存为一个HTML文件,然后通过浏览器打开,就能看到一个简单的流星雨网页了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)