{"html":"

Rendering

\n\n

\n \n \n

\n\n

\n \n \n

\n","css":".timeline {\n width: 380px;\n border-radius: 20px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: rgba(255, 255, 255, 0.04);\n box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);\n overflow: hidden;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n font-family: ui-sans-serif, system-ui;\n}\n\n.tl-head {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.06),\n rgba(255, 255, 255, 0.03)\n );\n}\n\n.sk.tlt {\n height: 12px;\n width: 46%;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.07);\n position: relative;\n overflow: hidden;\n}\n.sk.tlt::before {\n content: \"\";\n position: absolute;\n inset: -40% -60%;\n background: linear-gradient(\n 110deg,\n transparent 0%,\n rgba(255, 255, 255, 0.1) 22%,\n rgba(255, 255, 255, 0.2) 30%,\n transparent 44%\n );\n transform: translateX(-60%);\n animation: shimmer3 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n mix-blend-mode: screen;\n}\n\n.chip {\n margin-left: auto;\n font-size: 12px;\n padding: 8px 10px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: rgba(255, 255, 255, 0.04);\n color: rgba(255, 255, 255, 0.72);\n}\n\n.tracks {\n padding: 14px;\n display: grid;\n gap: 10px;\n}\n\n.track {\n height: 20px;\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.08);\n background: rgba(255, 255, 255, 0.03);\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 10px;\n}\n\n.track.dim {\n opacity: 0.75;\n}\n\n.clip {\n height: 10px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: rgba(255, 255, 255, 0.06);\n}\n.c1 {\n width: 70px;\n}\n.c2 {\n width: 44px;\n}\n.c3 {\n width: 92px;\n}\n\n.playhead {\n position: absolute;\n top: -10px;\n bottom: -10px;\n width: 2px;\n left: -10%;\n background: linear-gradient(\n 180deg,\n rgba(110, 231, 255, 0),\n rgba(110, 231, 255, 0.85),\n rgba(176, 140, 255, 0.75),\n rgba(110, 231, 255, 0)\n );\n box-shadow: 0 0 18px rgba(110, 231, 255, 0.22);\n animation: playhead 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n}\n\n.meter {\n height: 10px;\n margin: 0 14px 14px;\n border-radius: 999px;\n position: relative;\n overflow: hidden;\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.09);\n}\n.meter-fill {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n rgba(110, 231, 255, 0),\n rgba(110, 231, 255, 0.55),\n rgba(176, 140, 255, 0.55),\n rgba(110, 231, 255, 0)\n );\n transform: translateX(-70%);\n animation: flow3 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n}\n.meter-glint {\n position: absolute;\n inset: -30% -40%;\n background: linear-gradient(\n 110deg,\n transparent 0%,\n rgba(255, 255, 255, 0.12) 22%,\n rgba(255, 255, 255, 0.28) 28%,\n transparent 40%\n );\n transform: translateX(-55%);\n animation: glint3 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n mix-blend-mode: screen;\n}\n\n@keyframes playhead {\n 0% {\n left: -10%;\n opacity: 0;\n }\n 15% {\n opacity: 1;\n }\n 100% {\n left: 110%;\n opacity: 0;\n }\n}\n@keyframes shimmer3 {\n to {\n transform: translateX(60%);\n }\n}\n@keyframes flow3 {\n 0% {\n transform: translateX(-75%);\n opacity: 0.55;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateX(75%);\n opacity: 0.55;\n }\n}\n@keyframes glint3 {\n 0% {\n transform: translateX(-60%);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n transform: translateX(60%);\n opacity: 0;\n }\n}\n"}

quiet-rabbit-74

👁 实时预览

📝 源代码