源代码
—
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
background: radial-gradient(circle, #000428, #004e92); /* Dark night sky */
height: 100vh;
color: white;
font-family: Arial, sans-serif;
}
#fireworksCanvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
.message h1 {
font-size: 3rem;
margin: 0;
}
.message p {
font-size: 1.5rem;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<div class="message">
<h1 id="headline">🎆 Happy New Year 2025! 🎆</h1>
<p id="subtext">Wishing you joy, health, and success in the coming year!</p>
</div>
<script>
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Firework particles, stars, and meteors arrays
const particles = [];
const fireworks = [];
const stars = [];
const meteors = [];
// Helper function to get a random number between min and max
function random(min, max) {
return Math.random() * (max - min) + min;
}
// Create stars for the background
function createStars() {
stars.length = 0; // Clear existing stars
for (let i = 0; i < 200; i++) { // Add 200 stars
stars.push({
x: random(0, canvas.width),
y: random(0, canvas.height),
size: random(0.5, 2), // Stars of different sizes
brightness: random(0.5, 1), // Different brightness
flickerSpeed: random(0.01, 0.03), // Speed of flickering
flickerDirection: 1, // 1 for brightening, -1 for dimming
});
}
}
// Draw and update stars
function drawStars() {
stars.forEach((star) => {
ctx.globalAlpha = star.brightness;
ctx.beginPath();
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
ctx.fillStyle = "white";
ctx.fill();
ctx.globalAlpha = 1;
// Flickering effect
star.brightness += star.flickerSpeed * star.flickerDirection;
if (star.brightness >= 1 || star.brightness <= 0.5) {
star.flickerDirection *= -1; // Reverse flicker direction
}
});
}
// Create meteors
function createMeteor() {
meteors.push({
x: random(0, canvas.width),
y: random(0, canvas.height / 2), // Meteors start in the top half of the canvas
length: random(50, 100), // Shorter trail length
speedX: random(2, 5), // Slower horizontal speed
speedY: random(1, 3), // Slower vertical speed
opacity: 0.8 // Lower starting opacity
});
}
// Draw and update meteors
function drawMeteors() {
for (let i = meteors.length - 1; i >= 0; i--) {
const meteor = meteors[i];
// Draw the meteor trail
ctx.globalAlpha = meteor.opacity;
ctx.beginPath();
ctx.moveTo(meteor.x, meteor.y);
ctx.lineTo(meteor.x - meteor.length, meteor.y + meteor.length);
ctx.strokeStyle = "rgba(255, 255, 255, 0.6)"; // Softer white
ctx.lineWidth = 1; // Thinner line
ctx.stroke();
ctx.globalAlpha = 1;
// Update meteor position
meteor.x += meteor.speedX;
meteor.y += meteor.speedY;
meteor.opacity -= 0.005; // Fade out slower
// Remove the meteor if it is fully faded or off-screen
if (meteor.opacity <= 0 || meteor.x > canvas.width || meteor.y > canvas.height) {
meteors.splice(i, 1);
}
}
}
// Firework particles class
class Particle {
constructor(x, y, color, angle, speed, decay) {
this.x = x;
this.y = y;
this.color = color;
this.angle = angle;
this.speed = speed;
this.decay = decay;
this.alpha = 1;
this.gravity = 0.02;
}
update() {
this.speed *= this.decay;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= 0.01;
}
draw() {
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.globalAlpha = 1;
}
}
// Firework class
class Firework {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
this.init();
}
init() {
const particleCount = random(50, 100);
for (let i = 0; i < particleCount; i++) {
const angle = random(0, Math.PI * 2);
const speed = random(2, 5);
const decay = random(0.9, 0.99);
this.particles.push(new Particle(this.x, this.y, this.color, angle, speed, decay));
}
}
update() {
this.particles = this.particles.filter(particle => particle.alpha > 0);
this.particles.forEach(particle => particle.update());
}
draw() {
this.particles.forEach(particle => particle.draw());
}
}
// Create a firework
function createFirework() {
const x = random(0, canvas.width);
const y = random(0, canvas.height / 2);
const color = `hsl(${random(0, 360)}, 100%, 60%)`;
fireworks.push(new Firework(x, y, color));
}
// Animation loop
function animate() {
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw stars
drawStars();
// Draw meteors
drawMeteors();
// Draw fireworks
fireworks.forEach((firework, index) => {
firework.update();
firework.draw();
if (firework.particles.length === 0) {
fireworks.splice(index, 1);
}
});
// Randomly create fireworks and meteors
if (Math.random() < 0.05) createFirework();
if (Math.random() < 2 / 3600) createMeteor();
requestAnimationFrame(animate);
}
// Resize canvas on window resize
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
createStars(); // Regenerate stars for the new canvas size
});
// Language detection and translations
const translations = {
en: {
headline: "🎆 Happy New Year 2025! 🎆",
subtext: "Wishing you joy, health, and success in the coming year!"
},
de: {
headline: "🎆 Frohes neues Jahr 2025! 🎆",
subtext: "Wir wünschen Ihnen Freude, Gesundheit und Erfolg im kommenden Jahr!"
},
ru: {
headline: "🎆 С Новым Годом 2025! 🎆",
subtext: "Желаем вам радости, здоровья и успеха в наступающем году!"
},
es: {
headline: "🎆 ¡Feliz Año Nuevo 2025! 🎆",
subtext: "¡Te deseamos alegría, salud y éxito en el próximo año!"
},
fr: {
headline: "🎆 Bonne année 2025 ! 🎆",
subtext: "Nous vous souhaitons joie, santé et succès pour l'année à venir !"
},
it: {
headline: "🎆 Felice Anno Nuovo 2025! 🎆",
subtext: "Ti auguriamo gioia, salute e successo per l'anno prossimo!"
},
pt: {
headline: "🎆 Feliz Ano Novo 2025! 🎆",
subtext: "Desejamos a você alegria, saúde e sucesso no próximo ano!"
},
zh: {
headline: "🎆 新年快乐 2025! 🎆",
subtext: "祝愿您在新的一年里快乐、健康、成功！"
},
ja: {
headline: "🎆 明けましておめでとうございます 2025! 🎆",
subtext: "新年が喜びと健康、成功に満ちた一年でありますように！"
},
ko: {
headline: "🎆 새해 복 많이 받으세요 2025! 🎆",
subtext: "다가오는 한 해에 기쁨, 건강, 성공을 기원합니다!"
},
nl: {
headline: "🎆 Gelukkig Nieuwjaar 2025! 🎆",
subtext: "Wij wensen je vreugde, gezondheid en succes in het komende jaar!"
},
sv: {
headline: "🎆 Gott Nytt År 2025! 🎆",
subtext: "Vi önskar dig glädje, hälsa och framgång under det kommande året!"
},
pl: {
headline: "🎆 Szczęśliwego Nowego Roku 2025! 🎆",
subtext: "Życzymy Ci radości, zdrowia i sukcesów w nadchodzącym roku!"
},
ar: {
headline: "🎆 سنة جديدة سعيدة 2025! 🎆",
subtext: "نتمنى لكم السعادة والصحة والنجاح في العام القادم!"
},
tr: {
headline: "🎆 Mutlu Yıllar 2025! 🎆",
subtext: "Yeni yılda mutluluk, sağlık ve başarı dileriz!"
},
el: {
headline: "🎆 Καλή Χρονιά 2025! 🎆",
subtext: "Σας ευχόμαστε χαρά, υγεία και επιτυχία για τη νέα χρονιά!"
},
cs: {
headline: "🎆 Šťastný nový rok 2025! 🎆",
subtext: "Přejeme vám radost, zdraví a úspěch v nadcházejícím roce!"
},
hu: {
headline: "🎆 Boldog Új Évet 2025! 🎆",
subtext: "Boldogságot, egészséget és sikereket kívánunk az elkövetkező évre!"
},
th: {
headline: "🎆 สวัสดีปีใหม่ 2025! 🎆",
subtext: "ขอให้คุณมีความสุข สุขภาพแข็งแรง และประสบความสำเร็จในปีที่กำลังจะมาถึง!"
}
};
const userLanguage = navigator.language.slice(0, 2); // Get the first two letters of the language code
const message = translations[userLanguage] || translations.en; // Default to English
// Update the text content with the appropriate translation
document.getElementById("headline").textContent = message.headline;
document.getElementById("subtext").textContent = message.subtext;
// Initialize stars and start the animation loop
createStars();
animate();
</script>
</body>
</html>
*内容来源于网络，仅供学习
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
