十字型 2D 空间站 (参考手绘)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>十字型 2D 空间站 (参考手绘)</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 45%, #0c1228 0%, #03050c 100%);
    overflow: hidden;
    font-family: sans-serif;
  }

  /* ===== 星空背景 ===== */
  .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
  }
  .star:nth-child(1)  { width:2px;   height:2px;   top:12%; left:18%; animation-delay:0s;   }
  .star:nth-child(2)  { width:2.5px; height:2.5px; top:8%;  left:75%; animation-delay:.6s; }
  .star:nth-child(3)  { width:1.5px; height:1.5px; top:24%; left:85%; animation-delay:1.1s;}
  .star:nth-child(4)  { width:2px;   height:2px;   top:38%; left:10%; animation-delay:.3s; }
  .star:nth-child(5)  { width:1.5px; height:1.5px; top:72%; left:15%; animation-delay:1.5s;}
  .star:nth-child(6)  { width:2.5px; height:2.5px; top:82%; left:88%; animation-delay:.9s; }
  .star:nth-child(7)  { width:1.5px; height:1.5px; top:58%; left:92%; animation-delay:2s;   }
  .star:nth-child(8)  { width:2px;   height:2px;   top:88%; left:45%; animation-delay:.4s; }
  .star:nth-child(9)  { width:2px;   height:2px;   top:15%; left:50%; animation-delay:1.8s;}

  @keyframes twinkle {
    0%, 100% { opacity: .2; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1.2); }
  }

  /* ===== 空间站总容器 ===== */
  .station {
    position: relative;
    width: 460px;
    height: 460px;
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* ===== 通用舱体（白色长方形） ===== */
  .mod {
    position: absolute;
    background: #f2f5f8;
    border: 2px solid #8b9bb4; /* 偏灰的蓝色边框，增加立体感 */
    border-radius: 2px;        /* 极小的圆角，保持硬朗 */
    box-shadow: inset -2px -2px 6px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.4);
  }

  /* ===== 核心节点舱 ===== */
  .core {
    width: 64px; height: 64px;
    left: 198px; top: 198px;
    background: #ffffff;
    z-index: 10;
  }
  /* 核心舱内的方形细节（类似窗户或内舱） */
  .core-inner {
    position: absolute;
    width: 30px; height: 24px;
    top: 18px; left: 15px;
    border: 2px solid #5a6b82;
    background: #dbe4ee;
  }

  /* ===== 横向结构 ===== */
  .arm-h {
    width: 70px; height: 24px;
    top: 218px;
    z-index: 5;
  }
  .arm-h.left  { left: 128px; }
  .arm-h.right { right: 128px; }

  /* 横向太阳能帆板（手绘风格：大框内部包含几个小格） */
  .panel-h {
    position: absolute;
    width: 130px; height: 34px;
    top: 213px;
    background: #1e4f8a;
    border: 2px solid #4a90d9;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 4;
  }
  /* 用伪元素画出帆板内部的格子线 */
  .panel-h::before {
    content: ''; position: absolute; inset: 4px;
    border: 1px solid #5aa3f0;
  }
  .panel-h.left  { left: 0px; }
  .panel-h.right { right: 0px; }

  /* 帆板内部的小方块（视觉分割） */
  .panel-h .cell {
    width: 32px; height: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px);
  }

  /* ===== 纵向结构 ===== */
  .arm-v {
    width: 24px; height: 80px;
    left: 218px;
    z-index: 5;
  }
  .arm-v.up   { top: 118px; }
  .arm-v.down { top: 262px; }

  /* 顶部垂直帆板 */
  .panel-v {
    position: absolute;
    width: 34px; height: 80px;
    left: 213px; top: 38px;
    background: #1e4f8a;
    border: 2px solid #4a90d9;
    z-index: 4;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 12px, rgba(0,0,0,0.3) 12px, rgba(0,0,0,0.3) 14px);
  }
  .panel-v::before {
    content: ''; position: absolute; inset: 4px;
    border: 1px solid #5aa3f0;
  }

  /* 顶部小天线 */
  .antenna {
    position: absolute;
    width: 2px; height: 16px;
    background: #a0b2c8;
    left: 241px; top: 102px;
    transform: rotate(-30deg);
  }
  .antenna::after {
    content: ''; position: absolute;
    width: 6px; height: 6px;
    background: #c0d0e0;
    border-radius: 50%;
    top: -6px; left: -2px;
  }

  /* ===== 底部细节 ===== */
  /* 底部两侧突出的散热板/小翼 */
  .wing {
    position: absolute;
    width: 16px; height: 32px;
    background: #d0dae6;
    border: 2px solid #8b9bb4;
    top: 278px;
    z-index: 6;
  }
  .wing.left  { left: 196px; transform: skewY(15deg); }
  .wing.right { right: 196px; transform: skewY(-15deg); }

  /* 最底部的圆环对接器 */
  .thruster {
    position: absolute;
    width: 26px; height: 14px;
    background: #4a5b72;
    border: 2px solid #8b9bb4;
    border-radius: 50%;
    left: 217px; top: 348px;
    z-index: 6;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  }

  /* 舷窗装饰 (小深色方块) */
  .win {
    position: absolute;
    width: 8px; height: 6px;
    background: #2d4d6e;
    border: 1px solid #111;
  }
</style>
</head>
<body>

  <!-- 星空 -->
  <div class="star"></div><div class="star"></div><div class="star"></div>
  <div class="star"></div><div class="star"></div><div class="star"></div>
  <div class="star"></div><div class="star"></div><div class="star"></div>

  <!-- 空间站 -->
  <div class="station">

    <!-- ====== 横向部分 ====== -->
    <!-- 左侧结构 -->
    <div class="panel-h left">
      <div class="cell"></div><div class="cell"></div><div class="cell"></div>
    </div>
    <div class="mod arm-h left">
      <div class="win" style="left: 10px; top: 7px;"></div>
      <div class="win" style="left: 30px; top: 7px;"></div>
    </div>

    <!-- 右侧结构 -->
    <div class="panel-h right">
      <div class="cell"></div><div class="cell"></div><div class="cell"></div>
    </div>
    <div class="mod arm-h right">
      <div class="win" style="right: 10px; top: 7px;"></div>
      <div class="win" style="right: 30px; top: 7px;"></div>
    </div>

    <!-- ====== 纵向部分 ====== -->
    <!-- 顶部垂直帆板与舱体 -->
    <div class="panel-v"></div>
    <div class="mod arm-v up">
      <div class="win" style="left: 7px; top: 15px; transform: rotate(90deg);"></div>
      <div class="win" style="left: 7px; top: 45px; transform: rotate(90deg);"></div>
    </div>
    <div class="antenna"></div>

    <!-- 底部舱体与细节 -->
    <div class="mod arm-v down">
      <div class="win" style="left: 7px; top: 15px; transform: rotate(90deg);"></div>
      <div class="win" style="left: 7px; top: 45px; transform: rotate(90deg);"></div>
    </div>
    <!-- 底部两侧翼 -->
    <div class="wing left"></div>
    <div class="wing right"></div>
    <!-- 底部圆环 -->
    <div class="thruster"></div>

    <!-- ====== 核心节点舱 ====== -->
    <div class="mod core">
      <div class="core-inner"></div>
    </div>

  </div>

</body>
</html>