菜鸟-创作你的创作

圣诞节制作一颗HTML的圣诞树

lichongyang

圣诞节快乐！🎄下面是一个简单又漂亮的纯 HTML + CSS 实现的圣诞树，可以直接复制保存为 .html 文件在浏览器中打开。树上有闪烁的彩灯、星星、雪花飘落效果，适合节日氛围。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>圣诞树 🎄 Merry Christmas!</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .tree-container {
      position: relative;
      width: 400px;
      height: 600px;
      perspective: 1000px;
    }

    /* 树干 */
    .trunk {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 120px;
      background: linear-gradient(#5d4037, #3e2723);
      border-radius: 10px;
      z-index: 2;
    }

    /* 树身（三层） */
    .layer {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #1b5e20, #2e7d32, #4caf50);
      border-radius: 50% 50% 0 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      z-index: 1;
    }

    .layer1 { width: 280px; height: 180px; bottom: 100px; }
    .layer2 { width: 240px; height: 160px; bottom: 220px; }
    .layer3 { width: 200px; height: 140px; bottom: 340px; }

    /* 树顶星星 */
    .star {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 50px solid #ffeb3b;
      animation: twinkle 2s infinite alternate;
      z-index: 3;
      filter: drop-shadow(0 0 10px #ffeb3b);
    }

    .star::before {
      content: '';
      position: absolute;
      top: 10px;
      left: -20px;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 35px solid #ffeb3b;
      transform: rotate(36deg);
    }

    .star::after {
      content: '';
      position: absolute;
      top: 10px;
      left: -20px;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 35px solid #ffeb3b;
      transform: rotate(-36deg);
    }

    /* 彩灯 */
    .light {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      box-shadow: 0 0 15px currentColor;
      animation: blink 3s infinite;
    }

    .light:nth-child(1) { background: #ff1744; top: 30px; left: 30%; animation-delay: 0s; }
    .light:nth-child(2) { background: #ffd600; top: 60px; left: 70%; animation-delay: 0.5s; }
    .light:nth-child(3) { background: #00e676; top: 120px; left: 20%; animation-delay: 1s; }
    .light:nth-child(4) { background: #2979ff; top: 180px; left: 80%; animation-delay: 1.5s; }
    .light:nth-child(5) { background: #ff6d00; top: 240px; left: 25%; animation-delay: 2s; }
    .light:nth-child(6) { background: #e91e63; top: 300px; left: 75%; animation-delay: 2.5s; }

    /* 雪花飘落 */
    @keyframes snowfall {
      0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(800px) rotate(720deg); opacity: 0; }
    }

    .snowflake {
      position: absolute;
      width: 10px;
      height: 10px;
      background: white;
      border-radius: 50%;
      opacity: 0.8;
      animation: snowfall 10s linear infinite;
    }

    .snowflake:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
    .snowflake:nth-child(2) { left: 30%; animation-delay: 2s; animation-duration: 15s; }
    .snowflake:nth-child(3) { left: 50%; animation-delay: 4s; animation-duration: 10s; }
    .snowflake:nth-child(4) { left: 70%; animation-delay: 6s; animation-duration: 13s; }
    .snowflake:nth-child(5) { left: 90%; animation-delay: 8s; animation-duration: 11s; }

    /* 动画 */
    @keyframes twinkle {
      0% { transform: scale(1) rotate(0deg); }
      100% { transform: scale(1.2) rotate(10deg); }
    }

    @keyframes blink {
      0%, 100% { opacity: 1; box-shadow: 0 0 20px currentColor; }
      50% { opacity: 0.6; box-shadow: 0 0 10px currentColor; }
    }

    h1 {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2.2rem;
      color: #fff;
      text-shadow: 0 0 20px #ffeb3b;
      z-index: 10;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="tree-container">
    <div class="star"></div>
    <div class="layer layer1"></div>
    <div class="layer layer2"></div>
    <div class="layer layer3"></div>
    <div class="trunk"></div>

    <!-- 彩灯 -->
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>

    <!-- 雪花 -->
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>

    <h1>Merry Christmas! 🎅</h1>
  </div>
</body>
</html>

效果说明：

退出移动版