剩下的靠你们了(为L站准备的HTML代码)

第一版
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>春节拜年 - LINUX DO</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #ff4d4d; /* 红色背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      position: relative;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0; /* 确保烟花在最底层 */
    }

    .red-envelope {
      width: 200px;
      height: 300px;
      background-color: #d9534f;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      z-index: 2; /* 确保红包内容在烟花上层 */
    }

    .red-envelope .top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      background-color: #a92b29; /* 红包顶部的深色部分 */
      animation: openTop 2s ease-out forwards;
      z-index: 1;
    }

    .red-envelope .top-text {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      opacity: 0;
      z-index: 2;
      animation: showText 2s 1.5s forwards;
      text-align: center;
    }

    .red-envelope .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      z-index: 0;
      opacity: 0;
      animation: showContent 2s 1.5s forwards;
    }

    /* 背景烟花 */
    @keyframes openTop {
      0% {
        height: 0;
      }
      100% {
        height: 33%; /* 设置顶部打开三分之一 */
      }
    }

    @keyframes showText {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes showContent {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* 人物样式 */
    .person {
      position: absolute;
      bottom: 10%;
      left: 5%;
      display: flex;
      align-items: center;
      z-index: 2;
    }

    .person .body {
      width: 20px;
      height: 50px;
      background-color: #5a2d2e;
      border-radius: 10px;
      position: relative;
    }

    .person .head {
      width: 20px;
      height: 20px;
      background-color: #ffdf6e;
      border-radius: 50%;
      position: absolute;
      top: -15px;
      left: 0;
    }

    .person .arm-left,
    .person .arm-right {
      width: 40px;
      height: 5px;
      background-color: #5a2d2e;
      position: absolute;
      top: 15px;
    }

    .person .arm-left {
      left: -35px;
      transform: rotate(-30deg);
      transform-origin: right center;
    }

    .person .arm-right {
      right: -35px;
      transform: rotate(30deg);
      transform-origin: left center;
    }

    .person .pants {
      width: 20px;
      height: 20px;
      background-color: #1e4d6e;
      border-radius: 5px;
      position: absolute;
      bottom: 0;
    }

    .person .shoes {
      width: 20px;
      height: 10px;
      background-color: #333;
      border-radius: 5px;
      position: absolute;
      bottom: -10px;
    }

    .person .person2 {
      left: 35%; /* 另一个人 */
    }

    /* 添加LINUX DO标志和图片 */
    .logo-container {
      position: absolute;
      bottom: 5%;
      text-align: center;
      z-index: 3;
    }

    .logo-container img {
      width: 150px;
      height: auto;
      margin-bottom: 20px;
    }

    .logo-container .text {
      font-size: 24px;
      color: white;
      font-weight: bold;
    }

  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>
  <div class="red-envelope">
    <div class="top"></div>
    <div class="top-text">富强民主文明和谐</div>
    <div class="content">LINUX DO</div>
  </div>

  <!-- 画面左下角的两个人 -->
  <div class="person">
    <div class="body">
      <div class="head"></div>
      <div class="arm-left"></div>
      <div class="arm-right"></div>
      <div class="pants"></div>
      <div class="shoes"></div>
    </div>
    <div class="person2">
      <div class="body">
        <div class="head"></div>
        <div class="arm-left"></div>
        <div class="arm-right"></div>
        <div class="pants"></div>
        <div class="shoes"></div>
      </div>
    </div>
  </div>

  <!-- 添加LINUX DO标志 -->
  <div class="logo-container">
    <img src="https://linux.do/uploads/default/original/3X/a/8/a8168bb80c93075aad7aa1f598eee063adef1cb0.png" alt="LINUX DO Logo">
    <div class="text">LINUX DO</div>
  </div>

  <script>
    // 烟花效果
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 调整 canvas 大小
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });

    class Firework {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.alpha = 1;
        this.particles = [];
        this.createParticles();
      }

      createParticles() {
        const colors = ['#ffdf00', '#ff6347', '#32cd32', '#ff4500', '#00bfff', '#ff1493'];
        // 增加粒子数量,默认300,改为500
        for (let i = 0; i < 500; i++) {
          this.particles.push(new Particle(this.x, this.y, colors[Math.floor(Math.random() * colors.length)]));
        }
      }

      update() {
        this.particles.forEach(particle => particle.update());
        this.alpha -= 0.02;
      }

      draw() {
        this.particles.forEach(particle => particle.draw());
      }

      isDead() {
        return this.alpha <= 0;
      }
    }

    class Particle {
      constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        // 增加初始粒子大小
        this.size = Math.random() * 6 + 3; 
        this.speedX = Math.random() * 12 - 6; // 增加速度范围,粒子飞得更远
        this.speedY = Math.random() * 12 - 6;
        this.alpha = 1;
        this.lifeTime = Math.random() * 2 + 1; // 每个粒子的生命周期
      }

      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.alpha -= 0.02; // 渐变透明度
        this.size *= 0.98; // 渐小
        this.lifeTime -= 0.02; // 每个粒子生命周期结束
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color; // 直接使用颜色字符串
        ctx.globalAlpha = this.alpha; // 使用 alpha 透明度
        ctx.fill();
      }
    }

    const fireworks = [];
    function createFirework() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      fireworks.push(new Firework(x, y));
    }

    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      fireworks.forEach((firework, index) => {
        firework.update();
        firework.draw();
        if (firework.isDead()) {
          fireworks.splice(index, 1);
        }
      });
      requestAnimationFrame(animate);
    }

    // 增加更多烟花的发射
    setInterval(createFirework, Math.random() * 300 + 200); // 增加发射频率,确保烟花更密集
    animate();
  </script>
</body>
</html>

我技术不精,代码写完之后放GPT改了一下,但那个人的部分实在是一言难尽,总之,剩下的靠你们了

增加效果图:

希望有大佬可以帮忙改一下小人,小人真的是一言难尽,感谢

第二版

借鉴了 @xiongcaihu 的创意
增加了一些其他东西

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节拜年 - LINUX DO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #ff4d4d; /* 红色背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        position: relative;
      }

      canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0; /* 确保烟花在最底层 */
      }

      .red-envelope {
        width: 200px;
        height: 300px;
        background-color: #d9534f;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index: 2;
      }

      .red-envelope .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #a92b29;
        animation: openTop 2s ease-out forwards;
        z-index: 1;
      }

      .red-envelope .top-text {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        opacity: 0;
        animation: showText 2s 1.5s forwards;
        text-align: center;
      }

      .red-envelope .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        z-index: 0;
        opacity: 0;
        animation: showContent 2s 1.5s forwards;
      }

      @keyframes openTop {
        0% {
          height: 0;
        }
        100% {
          height: 33%;
        }
      }

      @keyframes showText {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes showContent {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .countdown {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        color: white;
        font-size: 18px;
        font-weight: bold;
        backdrop-filter: blur(5px);
        z-index: 4;
      }

      .logo-container {
        position: absolute;
        bottom: 5%;
        text-align: center;
        z-index: 3;
        left: 50%;
        transform: translateX(-50%);
      }

      .logo-container img {
        width: 150px;
        height: auto;
        margin-bottom: 20px;
      }

      .logo-container .text {
        font-size: 24px;
        color: white;
        font-weight: bold;
      }

      .emoji {
        position: absolute;
        font-size: 2rem;
        pointer-events: none;
        animation: floatUp 2s ease-out forwards;
      }

      @keyframes floatUp {
        0% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(-100px);
        }
      }

      .spark {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        animation: explode 1s ease-out forwards;
      }

      @keyframes explode {
        0% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(var(--dx), var(--dy));
        }
      }
    </style>
  </head>
  <body>
    <canvas id="fireworksCanvas"></canvas>
    <div class="red-envelope">
      <div class="top"></div>
      <div class="top-text">富强民主文明和谐</div>
      <div class="content">LINUX DO</div>
    </div>
    <div class="logo-container">
      <img src="https://linux.do/uploads/default/original/3X/a/8/a8168bb80c93075aad7aa1f598eee063adef1cb0.png" alt="LINUX DO Logo">
      <div class="text">LINUX DO</div>
    </div>
    <div class="countdown" id="countdown"></div>

    <div id="fireworks-container" class="fixed top-0 left-0 w-full h-full pointer-events-none"></div>

    <script>
      // 获取 canvas 元素
      const canvas = document.getElementById('fireworksCanvas');
      const ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 烟花效果
      class Firework {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.alpha = 1;
          this.particles = [];
          this.createParticles();
        }

        createParticles() {
          const colors = ['#ffdf00', '#ff6347', '#32cd32', '#ff4500', '#00bfff', '#ff1493'];
          for (let i = 0; i < 500; i++) {
            this.particles.push(new Particle(this.x, this.y, colors[Math.floor(Math.random() * colors.length)]));
          }
        }

        update() {
          this.particles.forEach(particle => particle.update());
          this.alpha -= 0.02;
        }

        draw() {
          this.particles.forEach(particle => particle.draw());
        }

        isDead() {
          return this.alpha <= 0;
        }
      }

      class Particle {
        constructor(x, y, color) {
          this.x = x;
          this.y = y;
          this.color = color;
          this.size = Math.random() * 6 + 3;
          this.speedX = Math.random() * 12 - 6;
          this.speedY = Math.random() * 12 - 6;
          this.alpha = 1;
          this.lifeTime = Math.random() * 2 + 1;
        }

        update() {
          this.x += this.speedX;
          this.y += this.speedY;
          this.alpha -= 0.02;
          this.size *= 0.98;
          this.lifeTime -= 0.02;
        }

        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.globalAlpha = this.alpha;
          ctx.fill();
        }
      }

      const fireworks = [];
      function createFirework(x, y) {
        fireworks.push(new Firework(x, y));
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        fireworks.forEach((firework, index) => {
          firework.update();
          firework.draw();
          if (firework.isDead()) {
            fireworks.splice(index, 1);
          }
        });
        requestAnimationFrame(animate);
      }

      setInterval(() => {
        const randomX = Math.random() * canvas.width;
        const randomY = Math.random() * canvas.height;
        createFirework(randomX, randomY);
      }, Math.random() * 300 + 200);
      animate();

      // 随机 emoji 列表
      const emojis = ['🎉', '✨', '🎆', '🎇', '💥', '❤️', '🌟', '😊', '🥳', '🎊', '🎈', '🌸', '🌠', '🌈', '🔥'];

      // 生成随机 emoji
      function getRandomEmoji() {
        return emojis[Math.floor(Math.random() * emojis.length)];
      }

      // 创建 emoji
      function createEmoji(x, y) {
        const emoji = document.createElement('div');
        emoji.classList.add('emoji');
        emoji.textContent = getRandomEmoji();
        emoji.style.left = `${x}px`;
        emoji.style.top = `${y}px`;
        document.body.appendChild(emoji);

        // 移除 emoji 元素
        setTimeout(() => {
          document.body.removeChild(emoji);
        }, 2000);
      }

      // 用户按下任意键或点击鼠标发射随机 emoji
      document.addEventListener('keydown', (event) => {
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        createEmoji(x, y);
      });

      document.addEventListener('click', (event) => {
        createEmoji(event.clientX, event.clientY);
        createFirework(event.clientX, event.clientY);
      });

      // 获取农历春节日期
      function getChineseNewYearDate() {
        return new Date('2025-01-29T00:00:00');
      }

      // 更新倒计时
      function updateCountdown() {
        const now = new Date();
        const newYearDate = getChineseNewYearDate();
        const timeDiff = newYearDate - now;

        if (timeDiff > 0) {
          const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
          const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
          const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
          document.getElementById('countdown').textContent = `距离新年还有 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
        } else {
          const daysSince = Math.floor(-timeDiff / (1000 * 60 * 60 * 24));
          const hoursSince = Math.floor((-timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const minutesSince = Math.floor((-timeDiff % (1000 * 60 * 60)) / (1000 * 60));
          const secondsSince = Math.floor((-timeDiff % (1000 * 60)) / 1000);
          document.getElementById('countdown').textContent = `新的一年已经开始了 ${daysSince}天 ${hoursSince}时 ${minutesSince}分 ${secondsSince}秒`;
        }
      }

      setInterval(updateCountdown, 1000);
      updateCountdown();
    </script>
  </body>
</html>

效果图:
如果可以的话建议自己试一试

欢迎佬们一同制作,感谢!!!

持续更新,欢迎佬们一同制作,感谢!!!

18 Likes

同时我也会持续更新,欢迎各位佬一同维护!

2 Likes

感谢大佬分享

1 Like

感谢大佬分享

1 Like

我不是大佬,只是一个站在巨人身上的矮子

1 Like

这个点不睡觉写代码 真的是辛苦了

1 Like

下午开始写的,一直在改漏洞

2 Likes

:tieba_087:多才多艺!

image



啥情况 :grinning:

是用的UTF-8 编码吗?

应该对了吧,我老师就这么教我的呀,这样,你试试这个
LINUX DO.zip (5.2 KB)

谢谢
ok了

1 Like

爱你~~


突然想起来了,你调整的是这里 :grinning:

1 Like

emmmm好好好

html playground: HTML Playground

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>linux.do 新年快乐</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background-color: #dc2626; /* 调整后的红色背景 */
            overflow: hidden; /* 防止出现滚动条 */
        }
        .firework {
            position: absolute;
            pointer-events: none; /* 允许点击穿透烟花 */
            z-index: 10; /* 确保烟花在其他内容之上 */
        }
        .spark {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            position: absolute;
            animation: explode 1s ease-out forwards;
        }
        .emoji {
            position: absolute;
            font-size: 2rem;
            pointer-events: none;
            animation: floatUp 2s ease-out forwards;
        }

        @keyframes explode {
            0% {
                opacity: 1;
                transform: translate(0, 0);
            }
            100% {
                opacity: 0;
                transform: translate(var(--dx), var(--dy));
            }
        }

        @keyframes floatUp {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-100px);
            }
        }
    </style>
</head>
<body class="bg-red-600 flex flex-col items-center justify-center min-h-screen text-white">
    <div class="text-center">
        <h1 class="text-6xl font-bold mb-4">linux.do</h1>
        <p class="text-xl mb-8">新年快乐!</p>
        <p class="text-sm text-red-300">按下任意键发射随机 emoji!</p>
    </div>

    <div id="fireworks-container" class="fixed top-0 left-0 w-full h-full pointer-events-none"></div>

    <script>
        const fireworksContainer = document.getElementById('fireworks-container');

        // 随机 emoji 列表
        const emojis = ['🎉', '✨', '🎆', '🎇', '💥', '❤️', '🌟', '😊', '🥳', '🎊', '🎈', '🌸', '🌠', '🌈', '🔥'];

        // 生成随机 emoji
        function getRandomEmoji() {
            return emojis[Math.floor(Math.random() * emojis.length)];
        }

        // 创建烟花
        function createFirework(x, y) {
            const numberOfSparks = 50 + Math.random() * 50;
            const colors = ['#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B']; // 更多绚丽的颜色
            for (let i = 0; i < numberOfSparks; i++) {
                const spark = document.createElement('div');
                spark.classList.add('spark');
                const color = colors[Math.floor(Math.random() * colors.length)];
                spark.style.backgroundColor = color;

                const angle = Math.random() * Math.PI * 2;
                const speed = 2 + Math.random() * 5;
                const dx = Math.cos(angle) * speed * 10;
                const dy = Math.sin(angle) * speed * 10;

                spark.style.setProperty('--dx', `${dx}px`);
                spark.style.setProperty('--dy', `${-dy}px`); // 注意 y 轴方向

                spark.style.left = `${x}px`;
                spark.style.top = `${y}px`;

                fireworksContainer.appendChild(spark);

                // 移除烟花元素
                setTimeout(() => {
                    fireworksContainer.removeChild(spark);
                }, 1000);
            }
        }

        // 创建 emoji
        function createEmoji(x, y) {
            const emoji = document.createElement('div');
            emoji.classList.add('emoji');
            emoji.textContent = getRandomEmoji();
            emoji.style.left = `${x}px`;
            emoji.style.top = `${y}px`;
            fireworksContainer.appendChild(emoji);

            // 移除 emoji 元素
            setTimeout(() => {
                fireworksContainer.removeChild(emoji);
            }, 2000);
        }

        // 自动发射烟花
        setInterval(() => {
            const randomX = Math.random() * window.innerWidth;
            const randomY = Math.random() * window.innerHeight;
            createFirework(randomX, randomY);
        }, 500); // 每 500 毫秒发射一次

        // 用户按下任意键发射随机 emoji
        document.addEventListener('keydown', (event) => {
            const x = Math.random() * window.innerWidth; // 随机 x 坐标
            const y = Math.random() * window.innerHeight; // 随机 y 坐标
            createEmoji(x, y);
        });
    </script>
</body>
</html>

这样太单调了吧

哇塞,不错啊佬~厉害厉害

唉 要是没有ai 那我真的要出手了,但是css这块,cursor出手基本上没前端什么活路了 :face_exhaling: