console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>大屏可视化 - 星空圆圈动画</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
      background: black;
    }

    /* 整体背景星空 */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: radial-gradient(ellipse at center, #0b0c10 0%, #000000 100%);
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: transparent url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
      animation: starMove 60s linear infinite;
      z-index: -1;
    }

    @keyframes starMove {
      0%   { background-position: 0 0; }
      100% { background-position: -1000px 1000px; }
    }

    .circle-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .base-circle {
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #00ffff;
      position: absolute;
      animation: float 2s ease-in-out infinite;
      overflow: hidden;
    }

    .center-circle {
      width: 200px;
      height: 200px;
      border: 4px solid #00ffff;
      animation-delay: 0s;
    }

    .outer-circle {
      width: 120px;
      height: 120px;
      border: 3px solid #00ffcc;
    }

    /* 闪烁星空背景动画（内部） */
    .circle-bg {
      position: absolute;
      width: 200%;
      height: 200%;
      background: url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
      animation: flicker 10s linear infinite;
      opacity: 0.3;
    }

    @keyframes flicker {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(-50%, 50%); }
    }

    /* 上下跳动动画 */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }

    /* 四个方位位置 */
    .top    { top: 5%;   left: 50%; transform: translateX(-50%); animation-delay: 0.2s; }
    .bottom { bottom: 5%; left: 50%; transform: translateX(-50%); animation-delay: 0.4s; }
    .left   { left: 5%;   top: 50%;  transform: translateY(-50%); animation-delay: 0.6s; }
    .right  { right: 5%;  top: 50%;  transform: translateY(-50%); animation-delay: 0.8s; }

    .circle-label {
      position: relative;
      z-index: 2;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="circle-container">
    <!-- 中心圆 -->
    <div class="base-circle center-circle">
      <div class="circle-bg"></div>
      <div class="circle-label">中心节点</div>
    </div>

    <!-- 四周圆 -->
    <div class="base-circle outer-circle top">
      <div class="circle-bg"></div>
      <div class="circle-label">上部节点</div>
    </div>
    <div class="base-circle outer-circle bottom">
      <div class="circle-bg"></div>
      <div class="circle-label">下部节点</div>
    </div>
    <div class="base-circle outer-circle left">
      <div class="circle-bg"></div>
      <div class="circle-label">左部节点</div>
    </div>
    <div class="base-circle outer-circle right">
      <div class="circle-bg"></div>
      <div class="circle-label">右部节点</div>
    </div>
  </div>
</body>
</html>