十字型 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:10%; left:15%; animation-delay:0s;   }
  .star:nth-child(2)  { width:3px;   height:3px;   top:6%;  left:70%; animation-delay:.6s; }
  .star:nth-child(3)  { width:1.5px; height:1.5px; top:20%; left:88%; animation-delay:1.1s;}
  .star:nth-child(4)  { width:2.5px; height:2.5px; top:38%; left:6%;  animation-delay:.3s; }
  .star:nth-child(5)  { width:2px;   height:2px;   top:72%; left:10%; animation-delay:1.5s;}
  .star:nth-child(6)  { width:3px;   height:3px;   top:82%; left:85%; 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:42%; animation-delay:.4s; }
  .star:nth-child(9)  { width:2.5px; height:2.5px; top:14%; left:48%; animation-delay:1.8s;}
  .star:nth-child(10) { width:1.5px; height:1.5px; top:46%; left:26%; animation-delay:2.4s;}

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

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

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

  /* ===== 白色长方形模块（基础件） ===== */
  .mod {
    position: absolute;
    background: #ffffff;
    border-radius: 3px;                     /* 很小的圆角，保持硬朗 */
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45),
                inset 0 -2px 5px rgba(150, 170, 200, 0.25);
  }

  /* 核心舱 */
  .core      { width: 96px; height: 24px; left: 172px; top: 208px; }

  /* 横向臂 */
  .arm-left  { width: 80px; height: 24px; left: 92px;  top: 208px; }
  .arm-right { width: 80px; height: 24px; left: 268px; top: 208px; }

  /* 纵向臂 */
  .arm-up    { width: 24px; height: 80px; left: 208px; top: 128px; }
  .arm-down  { width: 24px; height: 80px; left: 208px; top: 232px; }

  /* ===== 太阳能帆板 ===== */
  .panel {
    position: absolute;
    width: 26px;
    height: 72px;
    background: repeating-linear-gradient(
      0deg,
      #1d4d86 0px,
      #1d4d86 8px,
      #2b6cb5 8px,
      #2b6cb5 10px
    );
    border: 2px solid #4a90d9;
    border-radius: 2px;
    box-shadow: 0 0 16px rgba(74, 144, 217, 0.35);
  }

  .panel-lt { left: 79px;  top: 136px; }
  .panel-lb { left: 79px;  top: 232px; }
  .panel-rt { left: 335px; top: 136px; }
  .panel-rb { left: 335px; top: 232px; }

  /* ===== 舷窗 ===== */
  .win {
    position: absolute;
    width: 8px;
    height: 4px;
    background: #2d4d6e;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(120, 190, 255, 0.6);
  }

  /* ===== 对接口 ===== */
  .port {
    position: absolute;
    background: #b9c6d4;
    border: 1px solid #8496aa;
    border-radius: 2px;
  }
  .port-h { width: 12px; height: 10px; }
  .port-v { width: 10px; height: 12px; }

  /* ===== 停靠的飞船 ===== */
  .ship {
    position: absolute;
    width: 30px;
    height: 14px;
    background: #e8eef5;
    border: 2px solid #98aabd;
    border-radius: 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="station">

    <!-- 太阳能帆板（左右各一对） -->
    <div class="panel panel-lt"></div>
    <div class="panel panel-lb"></div>
    <div class="panel panel-rt"></div>
    <div class="panel panel-rb"></div>

    <!-- 纵向臂 -->
    <div class="mod arm-up">
      <div class="win" style="left:8px; top:26px;"></div>
      <div class="win" style="left:8px; top:48px;"></div>
    </div>
    <div class="mod arm-down">
      <div class="win" style="left:8px; top:26px;"></div>
      <div class="win" style="left:8px; top:48px;"></div>
    </div>

    <!-- 横向臂 -->
    <div class="mod arm-left">
      <div class="win" style="left:28px; top:10px;"></div>
      <div class="win" style="left:44px; top:10px;"></div>
    </div>
    <div class="mod arm-right">
      <div class="win" style="left:28px; top:10px;"></div>
      <div class="win" style="left:44px; top:10px;"></div>
    </div>

    <!-- 核心舱 -->
    <div class="mod core">
      <div class="win" style="left:20px; top:10px;"></div>
      <div class="win" style="left:44px; top:10px;"></div>
      <div class="win" style="left:68px; top:10px;"></div>
    </div>

    <!-- 四个对接口 -->
    <div class="port port-h" style="left:80px;  top:215px;"></div>
    <div class="port port-h" style="left:348px; top:215px;"></div>
    <div class="port port-v" style="left:215px; top:116px;"></div>
    <div class="port port-v" style="left:215px; top:312px;"></div>

    <!-- 停靠在左端的飞船 -->
    <div class="ship" style="left:50px; top:213px;"></div>

  </div>

</body>
</html>