html流星动态特效代码
时间: 2023-10-07 20:04:16 浏览: 64
以下是一个简单的 HTML 流星动态特效代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>流星动态特效</title>
<style>
body {
background-color: #000;
background-image: url('https://i.imgur.com/0NlBzeY.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.stars {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
animation-name: shooting-star;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes shooting-star {
from {
transform: translateX(0) translateY(0);
opacity: 1;
}
to {
transform: translateX(100vw) translateY(100vh);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="stars">
<div class="star" style="left: 10%; top: 20%; width: 2px; height: 2px;"></div>
<div class="star" style="left: 80%; top: 50%; width: 3px; height: 3px;"></div>
<div class="star" style="left: 30%; top: 80%; width: 4px; height: 4px;"></div>
</div>
</body>
</html>
```
这段代码会在页面背景上生成三个随机位置的流星,并让它们沿着固定的轨迹移动,达到流星飞过的效果。你可以根据需要调整流星的数量和位置,以及动画的持续时间和速度。