超好看的流星雨代码 html
时间: 2024-10-29 14:15:53 浏览: 16
流星雨源代码,结构简单容易懂
流星雨效果通常通过JavaScript和HTML结合来实现,并非直接提供HTML代码就能看到流星雨,因为这需要动态效果和一些交互。不过我可以给你一个简单的示例,展示如何在HTML中设置基础框架,然后用JavaScript创建流星雨动画:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>流星雨</title>
<style>
#sky {
position: relative;
width: 100%;
height: 400px;
background-color: black;
}
.meteor {
position: absolute;
width: 5px;
height: 10px;
background-color: white;
animation: meteor 2s linear infinite;
}
@keyframes meteor {
0% {top: 100%; opacity: 1;}
100% {top: -100%; opacity: 0; transform: translateY(200px);}
}
</style>
</head>
<body>
<div id="sky"></div>
<!-- JavaScript 动画部分 -->
<script>
for (let i = 0; i < 20; i++) {
let meteor = document.createElement('div');
meteor.classList.add('meteor');
meteor.style.left = Math.random() * 100 + '%';
document.getElementById('sky').appendChild(meteor);
}
</script>
</body>
</html>
```
这个示例会创建20颗流星,它们随机出现在天空背景上并向下移动消失。实际应用中,你可能会添加更复杂的动画效果和事件监听。
阅读全文