<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流星雨动画特效</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
height: 100vh;
font-family: Arial, sans-serif;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: twinkle var(--duration) infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.meteor {
position: absolute;
width: 2px;
height: 2px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
transform: rotate(var(--angle));
transform-origin: left center;
animation: meteor var(--speed) linear infinite;
opacity: 0;
z-index: 1;
}
@keyframes meteor {
0% {
transform: rotate(var(--angle)) translateX(0);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: rotate(var(--angle)) translateX(var(--distance));
opacity: 0;
}
}
.info {
position: fixed;
bottom: 20px;
right: 20px;
color: white;
z-index: 10;
font-size: 12px;
opacity: 0.7;
}
.info a {
color: #4fc3f7;
text-decoration: none;
}
.info a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<script>
// 创建星星背景
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
// 随机大小 (1-3px)
const size = Math.random() * 2 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// 随机位置
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
// 随机闪烁时间
star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);
starsContainer.appendChild(star);
}
}
// 创建流星
function createMeteors() {
const meteorCount = 10;
for (let i = 0; i < meteorCount; i++) {
const meteor = document.createElement('div');
meteor.classList.add('meteor');
// 随机角度 (-60到60度之间)
const angle = Math.random() * 120 - 60;
meteor.style.setProperty('--angle', `${angle}deg`);
// 随机速度 (3-8秒)
const speed = Math.random() * 5 + 3;
meteor.style.setProperty('--speed', `${speed}s`);
// 随机距离 (1000-2000px)
const distance = Math.random() * 1000 + 1000;
meteor.style.setProperty('--distance', `${distance}px`);
// 随机起始位置
meteor.style.left = `${Math.random() * 100}%`;
meteor.style.top = `${Math.random() * 100}%`;
// 随机延迟 (0-speed秒)
meteor.style.animationDelay = `${Math.random() * speed}s`;
document.body.appendChild(meteor);
}
}
// 初始化
window.onload = function() {
createStars();
createMeteors();
};
</script>
</body>
</html>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
