/* ============================================================ 星空宇宙背景 starfield.css 纯 CSS 实现：无图片、无额外请求，GPU 合成动画，加载快 叠加顺序：biomed1.css 先加载，本文件覆盖深色相关样式 ============================================================ */ /* ---------- 深空底色 + 星云 ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: /* 紫色星云 */ radial-gradient(ellipse 60% 45% at 18% 22%, rgba(88, 46, 158, 0.35), transparent 70%), /* 青蓝色星云 */ radial-gradient(ellipse 55% 40% at 82% 15%, rgba(24, 118, 168, 0.30), transparent 70%), /* 玫瑰色星云 */ radial-gradient(ellipse 45% 35% at 70% 80%, rgba(158, 46, 120, 0.18), transparent 70%), /* 底部渐暗 */ linear-gradient(to bottom, #050516 0%, #0a0a2e 45%, #120833 75%, #050510 100%); background-size: cover; } /* ---------- 三层闪烁星星 ---------- */ .stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; background-repeat: repeat; will-change: opacity; } /* 近景大星：亮、闪烁快 */ .stars.s1 { background-image: radial-gradient(1.6px 1.6px at 25px 35px, #ffffff 55%, transparent 60%), radial-gradient(1.4px 1.4px at 120px 90px, #cfe8ff 55%, transparent 60%), radial-gradient(1.8px 1.8px at 200px 160px,#fff7d6 55%, transparent 60%), radial-gradient(1.3px 1.3px at 70px 190px, #ffffff 55%, transparent 60%), radial-gradient(1.5px 1.5px at 260px 60px, #d9f7ff 55%, transparent 60%), radial-gradient(1.7px 1.7px at 155px 205px,#ffffff 55%, transparent 60%), radial-gradient(1.3px 1.3px at 285px 145px,#e8f4ff 55%, transparent 60%), radial-gradient(1.5px 1.5px at 45px 120px, #fff2c9 55%, transparent 60%); background-size: 300px 220px; animation: twinkle 2.6s ease-in-out infinite alternate; } /* 中景星星 */ .stars.s2 { background-image: radial-gradient(1.1px 1.1px at 40px 70px, #ffffff 55%, transparent 60%), radial-gradient(1.0px 1.0px at 160px 20px, #bcd7ff 55%, transparent 60%), radial-gradient(1.2px 1.2px at 240px 130px,#ffffff 55%, transparent 60%), radial-gradient(0.9px 0.9px at 90px 150px, #e6f0ff 55%, transparent 60%), radial-gradient(1.0px 1.0px at 200px 175px,#ffffff 55%, transparent 60%), radial-gradient(1.1px 1.1px at 20px 20px, #cfe0ff 55%, transparent 60%), radial-gradient(0.9px 0.9px at 130px 100px,#ffffff 55%, transparent 60%); background-size: 280px 180px; animation: twinkle 4.1s ease-in-out infinite alternate; animation-delay: 0.8s; } /* 远景星尘：细密、闪烁慢 */ .stars.s3 { background-image: radial-gradient(0.8px 0.8px at 15px 55px, rgba(255,255,255,.95) 55%, transparent 60%), radial-gradient(0.7px 0.7px at 105px 125px,rgba(200,220,255,.95) 55%, transparent 60%), radial-gradient(0.8px 0.8px at 185px 45px, rgba(255,255,255,.95) 55%, transparent 60%), radial-gradient(0.6px 0.6px at 55px 165px, rgba(220,235,255,.95) 55%, transparent 60%), radial-gradient(0.7px 0.7px at 145px 195px,rgba(255,255,255,.95) 55%, transparent 60%), radial-gradient(0.7px 0.7px at 95px 20px, rgba(255,255,255,.95) 55%, transparent 60%), radial-gradient(0.6px 0.6px at 200px 145px,rgba(210,230,255,.95) 55%, transparent 60%), radial-gradient(0.7px 0.7px at 30px 110px, rgba(255,255,255,.95) 55%, transparent 60%); background-size: 220px 210px; animation: twinkle 6.3s ease-in-out infinite alternate; animation-delay: 1.6s; } @keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } } /* ---------- 划过的流星（每 9 秒一次） ---------- */ .shooting-star { position: fixed; top: 12%; left: -10%; width: 160px; height: 2px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #cfe8ff 60%, #ffffff 100%); border-radius: 2px; filter: drop-shadow(0 0 4px rgba(160, 210, 255, 0.9)); transform: rotate(-18deg); animation: shoot 9s linear infinite; opacity: 0; } @keyframes shoot { 0% { transform: rotate(-18deg) translateX(0); opacity: 0; } 3% { opacity: 1; } 9% { transform: rotate(-18deg) translateX(130vw); opacity: 0; } 100% { transform: rotate(-18deg) translateX(130vw); opacity: 0; } } /* 尊重系统"减少动态效果"设置 */ @media (prefers-reduced-motion: reduce) { .stars, .shooting-star { animation: none; } .shooting-star { display: none; } } /* ============================================================ 深色背景下的文字 / 控件配色覆盖 ============================================================ */ body { color: #e8f0ff; background: #050516; /* 覆盖 biomed1.css 的浅蓝渐变 */ } #site-name { color: #ffffff; letter-spacing: 4px; text-shadow: 0 0 12px rgba(120, 190, 255, 0.9), 0 0 28px rgba(80, 140, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6); } body p { color: #9fb3d9; } /* 搜索框：暗色玻璃质感 */ .search-container input { background: rgba(12, 22, 48, 0.55); color: #ffffff; border: 1px solid rgba(120, 170, 255, 0.35); box-shadow: 0 0 18px rgba(60, 120, 255, 0.15), inset 0 0 12px rgba(40, 90, 200, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .search-container input::placeholder { color: #8fa3c8; } .search-container input:focus { border-color: rgba(140, 190, 255, 0.75); box-shadow: 0 0 24px rgba(80, 140, 255, 0.35), inset 0 0 12px rgba(40, 90, 200, 0.2); } /* 自定义链接胶囊：改为暗色玻璃 */ .link-wrapper { background: linear-gradient(145deg, rgba(40, 60, 110, 0.55), rgba(20, 32, 66, 0.55)); border: 1px solid rgba(120, 170, 255, 0.25); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .link-wrapper:hover { box-shadow: 0 6px 16px rgba(60, 120, 255, 0.3); } .custom-link { color: #dcebff; } /* 添加链接按钮：改成发光的星际青色 */ #add-link-button { background: linear-gradient(135deg, rgba(20, 121, 123, 0.85), rgba(30, 70, 140, 0.85)); border: 1px solid rgba(120, 220, 220, 0.35); box-shadow: 0 0 14px rgba(40, 180, 190, 0.25), 0 4px 8px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #add-link-button:hover { background: linear-gradient(135deg, rgba(28, 150, 152, 0.95), rgba(40, 90, 175, 0.95)); box-shadow: 0 0 22px rgba(60, 210, 220, 0.45), 0 6px 12px rgba(0, 0, 0, 0.4); } /* 图标悬停微光 */ .icon-container .icon { border-radius: 10px; transition: transform 0.2s ease, filter 0.2s ease; } .icon-container .icon:hover { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 0 8px rgba(130, 190, 255, 0.8)); } /* 底部文字 */ .bottom-text { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }