125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
// 创建星星背景
|
|
export function createStars() {
|
|
const shapesContainer = document.querySelector('.bg-shapes');
|
|
if (!shapesContainer) return;
|
|
|
|
const starCount = window.innerWidth < 768 ? 50 : 100;
|
|
|
|
for (let i = 0; i < starCount; i++) {
|
|
const star = document.createElement('div');
|
|
star.classList.add('star');
|
|
|
|
const size = Math.random() * 2 + 1;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const delay = Math.random() * 5;
|
|
|
|
star.style.width = `${size}px`;
|
|
star.style.height = `${size}px`;
|
|
star.style.left = `${posX}%`;
|
|
star.style.top = `${posY}%`;
|
|
star.style.animationDelay = `${delay}s`;
|
|
|
|
shapesContainer.appendChild(star);
|
|
}
|
|
}
|
|
|
|
// 创建浮动粒子
|
|
export function createParticles() {
|
|
const container = document.querySelector('.particle-container');
|
|
if (!container) return;
|
|
|
|
const particleCount = window.innerWidth < 768 ? 20 : 40;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
const size = Math.random() * 4 + 1;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const delay = Math.random() * 10;
|
|
const duration = Math.random() * 10 + 10;
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.top = `${posY}%`;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
|
|
container.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 创建扩散形状
|
|
export function createSpreadingShape() {
|
|
const shapesContainer = document.querySelector('.bg-shapes');
|
|
if (!shapesContainer) return;
|
|
|
|
const shape = document.createElement('div');
|
|
shape.classList.add('bg-shape');
|
|
|
|
const size = Math.random() * 450 + 200;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const duration = Math.random() * 6 + 4;
|
|
const delay = Math.random() * 1.5;
|
|
|
|
shape.style.width = `${size}px`;
|
|
shape.style.height = `${size}px`;
|
|
shape.style.left = `${posX}%`;
|
|
shape.style.top = `${posY}%`;
|
|
shape.style.animation = `spread ${duration}s ease-out forwards`;
|
|
shape.style.animationDelay = `${delay}s`;
|
|
|
|
shapesContainer.appendChild(shape);
|
|
|
|
// 动画结束后移除元素
|
|
setTimeout(() => {
|
|
shape.remove();
|
|
}, (duration + delay) * 1000);
|
|
}
|
|
|
|
// 定时创建扩散形状
|
|
export function startSpreadingShapes() {
|
|
createSpreadingShape();
|
|
setInterval(createSpreadingShape, 2000);
|
|
}
|
|
|
|
// 创建流星效果
|
|
export function createMeteor() {
|
|
const container = document.querySelector('.bg-shapes');
|
|
if (!container) return;
|
|
|
|
const meteor = document.createElement('div');
|
|
meteor.classList.add('meteor');
|
|
|
|
const height = Math.random() * 150 + 100;
|
|
const angle = Math.random() * 30 + 45;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 30;
|
|
const duration = Math.random() * 2 + 1;
|
|
|
|
meteor.style.height = `${height}px`;
|
|
meteor.style.left = `${posX}%`;
|
|
meteor.style.top = `${posY}%`;
|
|
meteor.style.setProperty('--angle', `${angle}deg`);
|
|
meteor.style.animation = `meteor ${duration}s linear forwards`;
|
|
|
|
container.appendChild(meteor);
|
|
|
|
// 动画结束后移除元素
|
|
setTimeout(() => {
|
|
meteor.remove();
|
|
}, duration * 1000);
|
|
}
|
|
|
|
// 定时创建流星
|
|
export function startMeteors() {
|
|
setInterval(() => {
|
|
if (Math.random() > 0.7) { // 70%概率创建流星
|
|
createMeteor();
|
|
}
|
|
}, 5000);
|
|
} |