js+css实现航天器控制面板ui交互效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现航天器控制面板ui交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
/* ════════════════════════════════════════════════
   FONTS
   ════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;500;700&display=swap");

/* ════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════ */
:root {
  /* metal palette */
  --metal-light: #c8cdd6;
  --metal-mid: #8a9099;
  --metal-dark: #3e434d;
  --metal-deep: #1e2128;
  --metal-shadow: #0a0c0f;

  /* accent colours */
  --amber: #e8a020;
  --amber-glow: #ff9900;
  --cyan: #00e5ff;
  --cyan-dim: #007a8a;
  --red-warn: #ff3b30;
  --green-ok: #32d74b;

  /* surfaces */
  --panel-bg: #191c22;
}

/* ════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(ellipse at center, #0d0f1a 0%, #03040a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Share Tech Mono", monospace;
  overflow: hidden;
}

/* CSS star-field background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
      1px 1px at 10% 15%,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 25% 40%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 50% 8%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 70% 55%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 85% 20%,
      rgba(255, 255, 255, 0.9) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 92% 75%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 38% 90%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 60% 30%,
      rgba(180, 200, 255, 0.9) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 15% 70%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 44% 62%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════════════════
   CONSOLE SHELL
   ════════════════════════════════════════════════ */
.console {
  position: relative;
  width: 720px;
  background: linear-gradient(160deg, #2e323c 0%, #1a1d24 40%, #13151b 100%);
  border-radius: 18px;
  padding: 28px;
  z-index: 1;

  border: 1px solid #4a5060;
  box-shadow:
    /* inner rim highlights */ inset 0 1px 0
      rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    /* outer chrome edge — three concentric rings */ 0 0 0 3px #2a2e38,
    0 0 0 5px #444a58, 0 0 0 7px #1a1d24,
    /* depth shadow */ 0 24px 80px rgba(0, 0, 0, 0.9),
    0 8px 20px rgba(0, 0, 0, 0.7),
    /* ambient glow */ 0 0 60px rgba(0, 160, 200, 0.06);
}

/* brushed-metal texture overlay */
.console::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.015) 2px,
    rgba(255, 255, 255, 0.015) 3px
  );
  pointer-events: none;
}

/* inner inset border */
.console::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   CORNER SCREWS
   ════════════════════════════════════════════════ */
.screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradie.........完整代码请登录后点击上方下载按钮下载查看