{"html":"

\n Music\n

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

\n One piece first ending\n

\n Desconhecido\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","css":".card {\n width: 190px;\n height: 254px;\n background: lightgrey;\n border-radius: 10px;\n}\n\n.card .one {\n width: 190px;\n height: 254px;\n z-index: 10;\n position: absolute;\n background: rgba(255, 255, 255, 0.55);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(8.5px);\n -webkit-backdrop-filter: blur(8.5px);\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n.card .one .title {\n width: 70px;\n border: 1px solid rgba(180, 177, 177, 0.308);\n display: block;\n margin: 12px auto;\n text-align: center;\n font-size: 10px;\n border-radius: 12px;\n font-family: Roboto, sans-serif;\n color: rgba(102, 100, 100, 0.911);\n}\n\n.card .one .music {\n width: 80px;\n height: 80px;\n background: rgba(216, 212, 212, 0.726);\n margin: 30px auto;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .one .name {\n width: 150px;\n height: 20px;\n font-size: 12px;\n font-weight: 500;\n font-family: Roboto, sans-serif;\n padding: 0 5px;\n margin: -22px auto;\n display: block;\n overflow: hidden;\n text-align: center;\n color: rgba(50, 49, 51, 0.637);\n}\n.card .one .name1 {\n width: 120px;\n height: 20px;\n font-size: 9px;\n font-weight: 500;\n font-family: Roboto, sans-serif;\n padding: 0 5px;\n margin: 19px auto;\n display: block;\n overflow: hidden;\n text-align: center;\n color: rgba(50, 49, 51, 0.637);\n}\n.card .one .bar {\n width: 100px;\n margin: -15px auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.card .one .bar:last-child {\n margin: 35px auto;\n width: 100%;\n padding: 2px 23px;\n}\n.card .one .bar .color {\n fill: rgba(82, 79, 79, 0.829);\n}\n.card .one .bar .color1 {\n fill: rgba(29, 28, 28, 0.829);\n cursor: pointer;\n}\n\n.card .one .bar .bi:first-child {\n transform: rotate(180deg);\n}\n.card .one .bar:last-child .color1:first-child {\n transform: rotate(0deg);\n}\n\n.card .two {\n width: 60px;\n height: 60px;\n background-color: rgb(131, 25, 163);\n filter: drop-shadow(0 0 10px rgb(131, 25, 163));\n border-radius: 50%;\n position: relative;\n top: 30px;\n left: 20px;\n animation: one 5s infinite;\n}\n\n.card .three {\n width: 60px;\n height: 60px;\n background-color: rgb(29, 209, 149);\n filter: drop-shadow(0 0 10px rgb(29, 209, 149));\n border-radius: 50%;\n position: relative;\n top: 90px;\n left: 90px;\n animation: two 5s infinite;\n}\n\n@keyframes one {\n 0% {\n top: 30px;\n left: 20px;\n }\n 20% {\n top: 50px;\n left: 40px;\n }\n 40% {\n top: 80px;\n left: 70px;\n }\n 50% {\n top: 60px;\n left: 40px;\n }\n 60% {\n top: 35px;\n left: 90px;\n }\n 80% {\n top: 70px;\n left: 70px;\n }\n 100% {\n top: 30px;\n left: 20px;\n }\n}\n\n@keyframes two {\n 0% {\n top: 90px;\n left: 90px;\n }\n 20% {\n top: 50px;\n left: 40px;\n }\n 40% {\n top: 60px;\n left: 20px;\n }\n 50% {\n top: 80px;\n left: 30px;\n }\n 60% {\n top: 35px;\n left: 90px;\n }\n 80% {\n top: 70px;\n left: 60px;\n }\n 100% {\n top: 90px;\n left: 90px;\n }\n}\n"}

modern-monkey-77

👁 实时预览

📝 源代码