2025 新年快乐！（可复制源代码）

七夏发表于 2025-1-1 09:00:16

<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/iboghYD5pWrGpI8Q1ZlKtiabibj2gYdiaicKicpjAa53dC2uuenjDicMBHW2UOW6mzzggnVquR7G585HmtA9sRuCqUiaiaA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>源代码</p>
<p>—</p>
<pre><code><!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;

   // 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 || 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>
</code></pre>
<p>*内容来源于网络，仅供学习</p>

页: [1]

3BBS's Archiver

2025 新年快乐！（可复制源代码）