```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

评测 Prompt

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Premium Curved Bottom Navigation</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> :root { --bg-dark: #0D0D0D; --navbar-bg: #1A1A1A; --accent: #66FF33; --accent-glow: rgba(102, 255, 51, 0.25); --accent-glow-soft: rgba(102, 255, 51, 0.08); --icon-active: #000000; --icon-inactive: #666666; --label-active: #66FF33; --label-inactive: #555555; --indicator-size: 54px; --navbar-height: 68px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background: var(--bg-dark); color: #fff; -webkit-tap-highlight-color: transparent; user-select: none; } /* Page Content */ .page-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 120px; } .page-emoji { font-size: 56px; margin-bottom: 16px; transition: all 0.3s ease; } .page-label { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; } /* ===== BOTTOM NAV ===== */ .bottom-nav { position: fixed; bottom: 16px; left: 12px; right: 12px; z-index: 999; display: flex; justify-content: center; } .nav-shell { position: relative; width: 100%; max-width: 420px; } /* SVG curved background */ .nav-svg-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 110px; pointer-events: none; } .nav-svg-bg path { fill: var(--navbar-bg); } /* Floating green ball */ .indicator { position: absolute; width: var(--indicator-size); height: var(--indicator-size); border-radius: 50%; background: var(--accent); z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; will-change: left, top; box-shadow: 0 4px 20px rgba(102, 255, 51, 0.45), 0 8px 40px rgba(102, 255, 51, 0.2), inset 0 2px 4px rgba(255,255,255,0.35); } /* Glow ring */ .indicator::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: var(--accent); opacity: 0.07; animation: glowPulse 2.5s ease-in-out infinite; } /* Shine highlight */ .indicator::after { content: ''; position: absolute; top: 5px; left: 10px; width: 35%; height: 25%; background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent); border-radius: 50%; } @keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: 0.07; } 50% { transform: scale(1.2); opacity: 0.14; } } .indicator-icon { position: relative; z-index: 2; } .indicator-icon svg { width: 24px; height: 24px; fill: var(--icon-active); } /* Nav items row */ .nav-row { position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: space-around; height: var(--navbar-height); padding: 0 4px 10px 4px; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; height: 100%; padding-top: 8px; } .nav-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .nav-icon svg { width: 24px; height: 24px; fill: var(--icon-inactive); transition: fill 0.3s ease; } .nav-label { font-size: 10px; font-weight: 500; margin-top: 4px; color: var(--label-inactive); transition: color 0.3s ease, transform 0.3s ease; white-space: nowrap; } /* Active state: icon hides, label glows */ .nav-item.active .nav-icon { transform: translateY(-30px) scale(0); opacity: 0; } .nav-item.active .nav-label { color: var(--label-active); font-weight: 600; } /* Ripple */ .nav-item .ripple-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; pointer-events: none; } .ripple-circle { position: absolute; border-radius: 50%; background: rgba(102, 255, 51, 0.12); transform: scale(0); animation: rippleAnim 550ms ease-out forwards; } @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } } /* Bounce on indicator */ @keyframes indicatorBounce { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 55% { transform: scale(0.94); } 75% { transform: scale(1.04); } 100% { transform: scale(1); } } .indicator.bounce { animation: indicatorBounce 450ms cubic-bezier(0.34,1.56,0.64,1) forwards; } @supports (padding-bottom: env(safe-area-inset-bottom)) { .bottom-nav { bottom: calc(16px + env(safe-area-inset-bottom)); } } @media (max-width: 350px) { :root { --indicator-size: 48px; --navbar-height: 60px; } .nav-label { font-size: 9px; } } </style> </head> <body> <div class="page-content"> <div class="page-emoji" id="pageEmoji">🏠</div> <div class="page-label" id="pageLabel">Home</div> </div> <div class="bottom-nav"> <div class="nav-shell" id="navShell"> <!-- SVG curved background --> <svg class="nav-svg-bg" id="svgBg" preserveAspectRatio="none"> <path id="svgPath" /> </svg> <!-- Green floating indicator --> <div class="indicator" id="indicator"> <div class="indicator-icon" id="indIcon"></div> </div> <!-- Items --> <div class="nav-row" id="navRow"> <div class="nav-item active" data-i="0" data-emoji="🏠" data-label="Home"> <div class="ripple-wrap"></div> <div class="nav-icon"> <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12