HyperSpace Chrome Bar

Fully animated space-themed Chrome top bar
换行
/* ==UserStyle==
@name           HyperSpace Chrome Bar
@name:en        HyperSpace Chrome Bar
@description    Fully animated space-themed Chrome top bar
@description:en Fully animated space-themed Chrome top bar
@version        2.2
@namespace      https://greasyfork.org/users/you
@license        MIT
@preprocessor   default
==/UserStyle== */

@-moz-document url-prefix("http") {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 48px;
    background: linear-gradient(to bottom, #05010f, #0a001a);
    backdrop-filter: blur(6px) brightness(1.2);
    z-index: 999999;
    pointer-events: none;
  }

  .hs-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 48px;
    overflow: hidden;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: screen;
  }

  .hs-stars, .hs-stars2, .hs-stars3 {
    position: absolute;
    width: 200%;
    height: 100%;
    background-repeat: repeat;
    background-size: contain;
    animation: moveStars linear infinite;
  }
  .hs-stars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='50'%3E%3Ccircle cx='10' cy='10' r='1' fill='white'/%3E%3C/svg%3E"); animation-duration: 24s; opacity: .45; }
  .hs-stars2 { background-image: inherit; animation-duration: 48s; opacity: .25; }
  .hs-stars3 { background-image: inherit; animation-duration: 72s; opacity: .15; }

  @keyframes moveStars {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .hs-warp {
    position: absolute;
    width: 200%;
    height: 48px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px);
    animation: warpSpeed 1.2s linear infinite;
    opacity: .35;
  }

  @keyframes warpSpeed {
    from { transform: translateX(0); }
    to { transform: translateX(-40%); }
  }

  .hs-scan {
    position: absolute;
    width: 100%;
    height: 48px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,255,255,.2) 50%, transparent 100%);
    animation: scanMotion 4s ease-in-out infinite;
    opacity: .25;
  }

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

  .hs-holo:hover {
    filter: drop-shadow(0 0 6px cyan) brightness(1.6);
  }

  .hs-planet {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 6px;
    left: -40px;
    background: radial-gradient(circle, #6f5aff, #1c0b3a);
    border-radius: 50%;
    animation: planetOrbit 20s linear infinite;
  }

  @keyframes planetOrbit {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(calc(100vw + 80px)) rotate(360deg); }
  }

  .hs-satellite {
    position: absolute;
    top: 14px;
    left: -40px;
    width: 40px;
    height: 20px;
    background: linear-gradient(to right, #e2e2e2, #b1b1b1);
    border-radius: 4px;
    animation: satFlyby 14s linear infinite;
  }

  @keyframes satFlyby {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(110vw) rotate(12deg); }
  }

  .hs-nebula {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 48px;
    background: radial-gradient(circle at 40% 50%, rgba(138,43,226,.22), transparent 50%), radial-gradient(circle at 70% 40%, rgba(0,191,255,.18), transparent 60%);
    animation: nebulaFlow 38s ease-in-out infinite;
  }

  @keyframes nebulaFlow {
    0% { transform: translateX(0); }
    50% { transform: translateX(-12%); }
    100% { transform: translateX(0); }
  }
}

(function(){
  const layers = ["hs-stars","hs-stars2","hs-stars3","hs-warp","hs-scan","hs-nebula","hs-planet","hs-satellite"];
  layers.forEach(c=>{
    const el=document.createElement("div");
    el.className=c+" hs-layer";
    document.body.appendChild(el);
  });
})();