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% 50%, #0b1026 0%, #04060f 100%);
    overflow: hidden;
    font-family: sans-serif;
  }

  /* ===== 星空背景 ===== */
  .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    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: 3px; height: 3px; top: 8%;  left: 72%; animation-delay: 0.6s; }
  .star:nth-child(3)  { width: 1.5px; height: 1.5px; top: 22%; left: 85%; animation-delay: 1.1s; }
  .star:nth-child(4)  { width: 2.5px; height: 2.5px; top: 35%; left: 8%;  animation-delay: 0.3s; }
  .star:nth-child(5)  { width: 2px; height: 2px; top: 68%; left: 12%; animation-delay: 1.5s; }
  .star:nth-child(6)  { width: 3px; height: 3px; top: 78%; left: 88%; animation-delay: 0.9s; }
  .star:nth-child(7)  { width: 1.5px; height: 1.5px; top: 55%; left: 92%; animation-delay: 2s; }
  .star:nth-child(8)  { width: 2px; height: 2px; top: 82%; left: 45%; animation-delay: 0.4s; }
  .star:nth-child(9)  { width: 2.5px; height: 2.5px; top: 15%; left: 50%; animation-delay: 1.8s; }
  .star:nth-child(10) { width: 1.5px; height: 1.5px; top: 45%; left: 28%; animation-delay: 2.4s; }
  .star:nth-child(11) { width: 2px; height: 2px; top: 5%;  left: 38%; animation-delay: 0.7s; }
  .star:nth-child(12) { width: 1.5px; height: 1.5px; top: 90%; left: 65%; animation-delay: 1.3s; }

  @keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
  }

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

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

  /* ===== 太阳能帆板（通用） ===== */
  .panel {
    position: absolute;
    background: repeating-linear-gradient(
      90deg,
      #1e4f8a 0px,
      #1e4f8a 26px,
      #2a6cb8 26px,
      #2a6cb8 28px
    );
    border: 3px solid #4a90d9;
    border-radius: 3px;
    box-shadow: 0 0 18px rgba(74, 144, 217, 0.35);
  }

  /* 帆板上的分割线 */
  .panel::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1px;
    pointer-events: none;
  }

  /* 左侧大帆板 */
  .panel-left-outer {
    width: 200px; height: 52px;
    left: 0; top: 64px;
  }
  .panel-left-inner {
    width: 200px; height: 52px;
    left: 0; top: 304px;
  }

  /* 右侧大帆板 */
  .panel-right-outer {
    width: 200px; height: 52px;
    right: 0; top: 64px;
  }
  .panel-right-inner {
    width: 200px; height: 52px;
    right: 0; top: 304px;
  }

  /* 核心舱中部小帆板 */
  .panel-core-l {
    width: 100px; height: 36px;
    left: 215px; top: 192px;
    background: repeating-linear-gradient(90deg, #1e4f8a 0px, #1e4f8a 12px, #2a6cb8 12px, #2a6cb8 14px);
  }
  .panel-core-r {
    width: 100px; height: 36px;
    right: 215px; top: 192px;
    background: repeating-linear-gradient(90deg, #1e4f8a 0px, #1e4f8a 12px, #2a6cb8 12px, #2a6cb8 14px);
  }

  /* ===== 桁架（连接帆板与舱体） ===== */
  .truss {
    position: absolute;
    background: linear-gradient(180deg, #8a9bb5, #5c6d82);
    border-radius: 2px;
  }
  .truss-h-left  { width: 130px; height: 6px; left: 195px; top: 87px; }
  .truss-h-right { width: 130px; height: 6px; right: 195px; top: 87px; }
  .truss-h-left-bottom  { width: 130px; height: 6px; left: 195px; top: 327px; }
  .truss-h-right-bottom { width: 130px; height: 6px; right: 195px; top: 327px; }

  /* 垂直小桁架（实验舱连接处） */
  .truss-v-left  { width: 6px; height: 90px; left: 318px; top: 40px; }
  .truss-v-right { width: 6px; height: 90px; right: 318px; top: 40px; }
  .truss-v-left-b  { width: 6px; height: 90px; left: 318px; top: 290px; }
  .truss-v-right-b { width: 6px; height: 90px; right: 318px; top: 290px; }

  /* ===== 舱段（圆柱体风格） ===== */
  .module {
    position: absolute;
    background: linear-gradient(180deg, #e8eef5 0%, #c5d0dc 45%, #a8b5c6 100%);
    border: 2px solid #8a9bb0;
    border-radius: 30px;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.08), 0 0 10px rgba(200,220,255,0.12);
  }

  /* 核心舱（横向） */
  .core-module {
    width: 240px; height: 52px;
    left: 230px; top: 184px;
    border-radius: 26px;
  }

  /* 节点舱（核心舱上的小圆球） */
  .node-module {
    position: absolute;
    width: 44px; height: 44px;
    background: radial-gradient(circle at 35% 30%, #f0f4f8, #b8c6d6);
    border: 2px solid #8a9bb0;
    border-radius: 50%;
    left: 328px; top: 188px;
    box-shadow: 0 0 10px rgba(200,220,255,0.2);
  }

  /* 实验舱（横向圆柱，左右各一） */
  .lab-module-left {
    width: 150px; height: 44px;
    left: 328px; top: 78px;
    border-radius: 22px;
    background: linear-gradient(180deg, #dce5ef 0%, #b8c6d6 50%, #9aaec2 100%);
  }
  .lab-module-right {
    width: 150px; height: 44px;
    right: 328px; top: 78px;
    border-radius: 22px;
    background: linear-gradient(180deg, #dce5ef 0%, #b8c6d6 50%, #9aaec2 100%);
  }
  .lab-module-left-b {
    width: 150px; height: 44px;
    left: 328px; top: 298px;
    border-radius: 22px;
    background: linear-gradient(180deg, #dce5ef 0%, #b8c6d6 50%, #9aaec2 100%);
  }
  .lab-module-right-b {
    width: 150px; height: 44px;
    right: 328px; top: 298px;
    border-radius: 22px;
    background: linear-gradient(180deg, #dce5ef 0%, #b8c6d6 50%, #9aaec2 100%);
  }

  /* 舱体上的窗户 */
  .window {
    position: absolute;
    width: 14px; height: 14px;
    background: radial-gradient(circle at 40% 35%, #9fd4ff, #2a6cb8);
    border-radius: 50%;
    border: 1.5px solid #6a8aaa;
    box-shadow: 0 0 6px rgba(100, 180, 255, 0.5);
  }
  .core-module .window:nth-child(1) { left: 30px; top: 18px; }
  .core-module .window:nth-child(2) { left: 70px; top: 18px; }
  .core-module .window:nth-child(3) { left: 150px; top: 18px; }
  .core-module .window:nth-child(4) { left: 190px; top: 18px; }

  .lab-module-left .window  { left: 62px; top: 14px; width: 12px; height: 12px; }
  .lab-module-right .window { right: 62px; top: 14px; width: 12px; height: 12px; }
  .lab-module-left-b .window  { left: 62px; top: 16px; width: 12px; height: 12px; }
  .lab-module-right-b .window { right: 62px; top: 16px; width: 12px; height: 12px; }

  /* ===== 对接的飞船（核心舱后端） ===== */
  .docked-ship {
    position: absolute;
    width: 56px; height: 28px;
    background: linear-gradient(180deg, #d0dae6, #9aacbe);
    border: 2px solid #7a8ea2;
    border-radius: 14px;
    left: 174px; top: 196px;
  }
  .docked-ship::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    background: #6a7e92;
    border-radius: 50%;
    right: -8px; top: 6px;
  }

  /* 前端小飞船 */
  .front-ship {
    position: absolute;
    width: 48px; height: 24px;
    background: linear-gradient(180deg, #d0dae6, #9aacbe);
    border: 2px solid #7a8ea2;
    border-radius: 12px;
    right: 176px; top: 198px;
  }
  .front-ship::before {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    background: #6a7e92;
    border-radius: 50%;
    left: -6px; top: 5px;
  }

  /* ===== 机械臂（简化为折线） ===== */
  .arm {
    position: absolute;
    width: 70px; height: 6px;
    background: #c8a84e;
    border-radius: 3px;
    left: 355px; top: 150px;
    transform: rotate(-35deg);
    transform-origin: left center;
    box-shadow: 0 0 6px rgba(200, 168, 78, 0.3);
  }
  .arm::after {
    content: "";
    position: absolute;
    right: -4px; top: -5px;
    width: 14px; height: 14px;
    border: 3px solid #c8a84e;
    border-radius: 50%;
    background: transparent;
  }

  /* 底部小字 */
  .label {
    position: absolute;
    bottom: 18px;
    width: 100%;
    text-align: center;
    color: rgba(180, 210, 240, 0.5);
    font-size: 11px;
    letter-spacing: 3px;
  }
</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="star"></div><div class="star"></div><div class="star"></div>

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

    <!-- 桁架 -->
    <div class="truss truss-h-left"></div>
    <div class="truss truss-h-right"></div>
    <div class="truss truss-h-left-bottom"></div>
    <div class="truss truss-h-right-bottom"></div>
    <div class="truss truss-v-left"></div>
    <div class="truss truss-v-right"></div>
    <div class="truss truss-v-left-b"></div>
    <div class="truss truss-v-right-b"></div>

    <!-- 大型太阳能帆板 -->
    <div class="panel panel-left-outer"></div>
    <div class="panel panel-left-inner"></div>
    <div class="panel panel-right-outer"></div>
    <div class="panel panel-right-inner"></div>
    <div class="panel panel-core-l"></div>
    <div class="panel panel-core-r"></div>

    <!-- 实验舱（上下各一组，形成 T 字扩展感） -->
    <div class="module lab-module-left"><div class="window"></div></div>
    <div class="module lab-module-right"><div class="window"></div></div>
    <div class="module lab-module-left-b"><div class="window"></div></div>
    <div class="module lab-module-right-b"><div class="window"></div></div>

    <!-- 核心舱 + 节点舱 -->
    <div class="module core-module">
      <div class="window"></div>
      <div class="window"></div>
      <div class="window"></div>
      <div class="window"></div>
    </div>
    <div class="node-module"></div>

    <!-- 对接飞船 -->
    <div class="docked-ship"></div>
    <div class="front-ship"></div>

    <!-- 机械臂 -->
    <div class="arm"></div>

  </div>

  <div class="label">2D 空间站</div>

</body>
</html>