play

{"html":"

\n \n \n \n \n play\n Created with Sketch Beta.\n \n \n \n \n \n \n \n \n \n forward\n \n \n

\n \n \n \n \n \n Created with Sketch.\n \n \n \n \n \n \n \n \n \n \n

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

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

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

\n \n \n \n \n triangle-filled\n \n \n \n \n \n \n \n

\n","css":".card {\n position: relative;\n width: 400px;\n height: 160px;\n border-radius: 20Q;\n display: flex;\n justify-content: center;\n padding: 1rem;\n}\n\n.music-bar {\n position: absolute;\n width: 90%;\n height: 50px;\n padding: 0.5rem;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 32px 0 #0d2626;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 60Q;\n border: 1px solid rgba(255, 255, 255, 0.18);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.music {\n position: absolute;\n width: 40px;\n height: 40px;\n background: rgba(149, 0, 255, 0.25);\n box-shadow: 0 8px 32px 0 #0d2626;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 15Q;\n border: 1px solid rgba(255, 255, 255, 0.18);\n cursor: pointer;\n}\n.music::after {\n content: \"Uiverse Anthem\";\n position: absolute;\n left: 45px;\n width: 130px;\n color: #fff;\n font-weight: 600;\n}\n.music::before {\n content: \"NKS\";\n position: absolute;\n bottom: 0;\n left: 45px;\n width: 125px;\n color: #ffffffce;\n font-size: 0.8rem;\n font-weight: 400;\n letter-spacing: 2px;\n}\n\n.music-control {\n position: absolute;\n right: 0;\n border-radius: 30Q;\n width: 30%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n}\n.music-control svg {\n cursor: pointer;\n}\n.music-control svg:active {\n transform: scale(0.9);\n}\n\n.bottom-bar {\n position: absolute;\n bottom: 10px;\n width: 100%;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.nav-bar {\n position: absolute;\n left: 20px;\n width: 70%;\n height: 60px;\n padding: 6px;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 32px 0 #0d2626;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 60Q;\n border: 1px solid rgba(255, 255, 255, 0.18);\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n}\n.nav-icons {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n padding: 6px;\n border-radius: 60Q;\n cursor: pointer;\n transition: all 0.1s ease-in-out;\n}\n.nav-icons:hover {\n background-color: rgba(255, 255, 255, 0.15);\n}\n.nav-icons svg {\n transition: all 0.1s ease-in-out;\n}\n.nav-icons:hover svg {\n transform: translateY(-2px);\n}\n.nav-icons svg:active {\n transform: scale(0.9);\n}\n\n.search-bar {\n position: absolute;\n right: 20px;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 32px 0 #0d2626;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.18);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.1s ease-in-out;\n}\n.search-bar:hover {\n transform: translateY(-2px);\n}\n.search-bar svg {\n transition: all 0.1s ease-in-out;\n transition-delay: 0.1s;\n}\n.search-bar:hover svg {\n transform: translateY(-2px);\n}\n.search-bar svg:active {\n transform: scale(0.9);\n}\n\n.shapes {\n position: absolute;\n width: 600px;\n height: 400px;\n z-index: -1;\n}\n\n.triangle {\n position: absolute;\n top: 20%;\n left: 10%;\n width: 100px;\n height: 100px;\n transform: rotate(-45deg);\n animation: move 12s linear infinite;\n}\n\n.circle {\n position: absolute;\n top: 30%;\n right: 30%;\n width: 80px;\n height: 80px;\n background-color: #c436eb;\n border-radius: 50%;\n animation: move 12s linear infinite;\n animation-delay: 2s;\n}\n\n.square {\n position: absolute;\n bottom: 40%;\n right: 60%;\n width: 50px;\n height: 50px;\n background-color: #def92e;\n border-radius: 12Q;\n transform: rotate(45deg);\n animation: move 12s alternate-reverse infinite;\n animation-delay: 6s;\n}\n\n@keyframes move {\n from,\n to {\n transform: rotate(-45deg);\n }\n 25%,\n 75% {\n transform: translateX(30px) translateY(10px) rotate(30deg);\n }\n 50% {\n transform: translateX(60px) translateY(20px);\n }\n}\n"}

purple-quail-14

👁 实时预览

📝 源代码