{"html":"

\n \n\n

Glow

Echo

\n\n

\n \n \n

\n \n

\n \n \n \n \n \n \n \n \n

\n \n

\n","css":".main-music-card {\n max-width: 420px;\n width: 90%;\n padding: 18px;\n border-radius: 35px;\n background: #000;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\n display: flex;\n flex-direction: column;\n gap: 14px;\n font-family: -apple-system, system-ui, sans-serif;\n color: white;\n transition: all 0.3s ease;\n}\n\n.track-info {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.album-art {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n flex-shrink: 0;\n transition: transform 0.3s ease;\n}\n\n.album-art:hover {\n transform: scale(1.05);\n}\n\n.track-details {\n flex-grow: 1;\n overflow: hidden;\n}\n\n.track-title {\n font-size: 1.3em;\n font-weight: 600;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.artist-name {\n font-size: 0.9em;\n color: #d1d1d6;\n margin-top: 2px;\n}\n\n.volume-bars {\n display: flex;\n align-items: flex-end;\n gap: 2px;\n width: 38px;\n height: 32px;\n}\n\n.volume-bars .bar {\n width: 3px;\n background: linear-gradient(180deg, #00c6ff, #0072ff);\n border-radius: 2px;\n animation: bounce 0.8s infinite ease-in-out;\n animation-delay: var(--delay);\n animation-play-state: running;\n}\n\n@keyframes bounce {\n 0%,\n 100% {\n height: 6px;\n }\n 50% {\n height: 26px;\n }\n}\n\n.playback-controls {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.time-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.8em;\n color: #8e8e93;\n}\n\n.current-time::before {\n content: \"0:00\";\n animation: timer 45s steps(45) infinite;\n display: inline-block;\n animation-play-state: running;\n}\n@keyframes timer {\n 0% {\n content: \"0:00\";\n }\n 2.22% {\n content: \"0:01\";\n }\n 4.44% {\n content: \"0:02\";\n }\n 6.67% {\n content: \"0:03\";\n }\n 8.89% {\n content: \"0:04\";\n }\n 11.11% {\n content: \"0:05\";\n }\n 13.33% {\n content: \"0:06\";\n }\n 15.56% {\n content: \"0:07\";\n }\n 17.78% {\n content: \"0:08\";\n }\n 20.00% {\n content: \"0:09\";\n }\n 22.22% {\n content: \"0:10\";\n }\n 24.44% {\n content: \"0:11\";\n }\n 26.67% {\n content: \"0:12\";\n }\n 28.89% {\n content: \"0:13\";\n }\n 31.11% {\n content: \"0:14\";\n }\n 33.33% {\n content: \"0:15\";\n }\n 35.56% {\n content: \"0:16\";\n }\n 37.78% {\n content: \"0:17\";\n }\n 40.00% {\n content: \"0:18\";\n }\n 42.22% {\n content: \"0:19\";\n }\n 44.44% {\n content: \"0:20\";\n }\n 46.67% {\n content: \"0:21\";\n }\n 48.89% {\n content: \"0:22\";\n }\n 51.11% {\n content: \"0:23\";\n }\n 53.33% {\n content: \"0:24\";\n }\n 55.56% {\n content: \"0:25\";\n }\n 57.78% {\n content: \"0:26\";\n }\n 60.00% {\n content: \"0:27\";\n }\n 62.22% {\n content: \"0:28\";\n }\n 64.44% {\n content: \"0:29\";\n }\n 66.67% {\n content: \"0:30\";\n }\n 68.89% {\n content: \"0:31\";\n }\n 71.11% {\n content: \"0:32\";\n }\n 73.33% {\n content: \"0:33\";\n }\n 75.56% {\n content: \"0:34\";\n }\n 77.78% {\n content: \"0:35\";\n }\n 80.00% {\n content: \"0:36\";\n }\n 82.22% {\n content: \"0:37\";\n }\n 84.44% {\n content: \"0:38\";\n }\n 86.67% {\n content: \"0:39\";\n }\n 88.89% {\n content: \"0:40\";\n }\n 91.11% {\n content: \"0:41\";\n }\n 93.33% {\n content: \"0:42\";\n }\n 95.56% {\n content: \"0:43\";\n }\n 97.78% {\n content: \"0:44\";\n }\n 100% {\n content: \"0:45\";\n }\n}\n\n.remaining-time::before {\n content: \"0:45\";\n animation: timerDown 45s steps(45) infinite;\n display: inline-block;\n animation-play-state: running;\n}\n@keyframes timerDown {\n 0% {\n content: \"0:45\";\n }\n 2.22% {\n content: \"0:44\";\n }\n 4.44% {\n content: \"0:43\";\n }\n 6.67% {\n content: \"0:42\";\n }\n 8.89% {\n content: \"0:41\";\n }\n 11.11% {\n content: \"0:40\";\n }\n 13.33% {\n content: \"0:39\";\n }\n 15.56% {\n content: \"0:38\";\n }\n 17.78% {\n content: \"0:37\";\n }\n 20.00% {\n content: \"0:36\";\n }\n 22.22% {\n content: \"0:35\";\n }\n 24.44% {\n content: \"0:34\";\n }\n 26.67% {\n content: \"0:33\";\n }\n 28.89% {\n content: \"0:32\";\n }\n 31.11% {\n content: \"0:31\";\n }\n 33.33% {\n content: \"0:30\";\n }\n 35.56% {\n content: \"0:29\";\n }\n 37.78% {\n content: \"0:28\";\n }\n 40.00% {\n content: \"0:27\";\n }\n 42.22% {\n content: \"0:26\";\n }\n 44.44% {\n content: \"0:25\";\n }\n 46.67% {\n content: \"0:24\";\n }\n 48.89% {\n content: \"0:23\";\n }\n 51.11% {\n content: \"0:22\";\n }\n 53.33% {\n content: \"0:21\";\n }\n 55.56% {\n content: \"0:20\";\n }\n 57.78% {\n content: \"0:19\";\n }\n 60.00% {\n content: \"0:18\";\n }\n 62.22% {\n content: \"0:17\";\n }\n 64.44% {\n content: \"0:16\";\n }\n 66.67% {\n content: \"0:15\";\n }\n 68.89% {\n content: \"0:14\";\n }\n 71.11% {\n content: \"0:13\";\n }\n 73.33% {\n content: \"0:12\";\n }\n 75.56% {\n content: \"0:11\";\n }\n 77.78% {\n content: \"0:10\";\n }\n 80.00% {\n content: \"0:09\";\n }\n 82.22% {\n content: \"0:08\";\n }\n 84.44% {\n content: \"0:07\";\n }\n 86.67% {\n content: \"0:06\";\n }\n 88.89% {\n content: \"0:05\";\n }\n 91.11% {\n content: \"0:04\";\n }\n 93.33% {\n content: \"0:03\";\n }\n 95.56% {\n content: \"0:02\";\n }\n 97.78% {\n content: \"0:01\";\n }\n 100% {\n content: \"0:00\";\n }\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n width: 0;\n background: linear-gradient(90deg, #00c6ff, #0072ff);\n border-radius: 2px;\n animation: progressAnim 45s linear infinite;\n animation-play-state: running;\n}\n\n.progress-handle {\n position: absolute;\n top: 50%;\n left: 0%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);\n animation: handleAnim 45s linear infinite;\n animation-play-state: running;\n}\n\n.button-row {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n}\n\n.control-button {\n margin-top: 2%;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n border: none;\n background: none;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition:\n background 0.2s,\n transform 0.2s;\n color: #fff;\n}\n\n.control-button.play-pause-button:hover,\n.control-button.d:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: scale(1.05);\n}\n\n.main-control-btns {\n justify-content: center;\n align-items: center;\n display: flex;\n margin-left: 10%;\n gap: 20%;\n}\n\n.play-pause-button .icon-pause {\n display: none;\n}\n\n#play-toggle:checked ~ .track-info .volume-bars .bar {\n animation-play-state: paused;\n}\n#play-toggle:checked ~ .playback-controls .progress-fill,\n#play-toggle:checked ~ .playback-controls .progress-handle {\n animation-play-state: paused;\n}\n.main-music-card:has(#play-toggle:checked) .time-info .current-time::before,\n.main-music-card:has(#play-toggle:checked) .time-info .remaining-time::before {\n animation-play-state: paused;\n}\n#play-toggle:checked ~ .playback-controls .play-pause-button .icon-play {\n display: block;\n}\n#play-toggle:checked ~ .playback-controls .play-pause-button .icon-pause {\n display: none;\n}\n\n#play-toggle:not(:checked) ~ .playback-controls .play-pause-button .icon-play {\n display: none;\n}\n#play-toggle:not(:checked) ~ .playback-controls .play-pause-button .icon-pause {\n display: block;\n}\n\n@keyframes progressAnim {\n from {\n width: 0;\n }\n to {\n width: 100%;\n }\n}\n\n@keyframes handleAnim {\n from {\n left: 0%;\n }\n to {\n left: 100%;\n }\n}\n"}

orange-dog-20

👁 实时预览

📝 源代码