{"html":"

Soldiers Rage

Tha Mechanic

\n \n

\n \n \n\n

\n\n

1:31

3:46

","css":"/* Spotify music card made by: csozi | Website: www.csozi.hu*/\n\n.card {\n position: relative;\n width: 250px;\n height: 120px;\n background: #191414;\n border-radius: 10px;\n padding: 10px;\n}\n\n.top {\n position: relative;\n width: 100%;\n display: flex;\n gap: 10px;\n}\n\n.pfp {\n position: relative;\n top: 5px;\n left: 5px;\n height: 40px;\n width: 40px;\n background-color: #d2d2d2;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.title-1 {\n color: white;\n font-size: 25px;\n font-weight: bolder;\n}\n\n.title-2 {\n color: white;\n font-size: 12px;\n font-weight: bold;\n}\n\n.time {\n width: 90%;\n background-color: #5e5e5e;\n height: 6px;\n border-radius: 3px;\n position: absolute;\n left: 5%;\n bottom: 22px;\n}\n\n.elapsed {\n width: 42%;\n background-color: #1db954;\n height: 100%;\n border-radius: 3px;\n}\n\n.controls {\n color: white;\n display: flex;\n position: absolute;\n bottom: 30px;\n left: 0;\n width: 100%;\n justify-content: center;\n}\n\n.volume {\n height: 100%;\n width: 48px;\n}\n\n.air {\n height: 100%;\n width: 48px;\n}\n\n.controls svg {\n cursor: pointer;\n transition: 0.1s;\n}\n\n.controls svg:hover {\n color: #1db954;\n}\n\n.volume {\n opacity: 0;\n position: relative;\n transition: 0.2s;\n}\n\n.volume .slider {\n height: 4px;\n background-color: #5e5e5e;\n width: 80%;\n border-radius: 2px;\n margin-top: 8px;\n margin-left: 10%;\n}\n\n.volume .slider .green {\n background-color: #1db954;\n height: 100%;\n width: 80%;\n border-radius: 3px;\n}\n\n.volume .circle {\n background-color: white;\n height: 6px;\n width: 6px;\n border-radius: 3px;\n position: absolute;\n right: 20%;\n top: 60%;\n}\n\n.volume_button:hover ~ .volume {\n opacity: 1;\n}\n\n.timetext {\n color: white;\n font-size: 8px;\n position: absolute;\n}\n\n.time_now {\n bottom: 11px;\n left: 10px;\n}\n\n.time_full {\n bottom: 11px;\n right: 10px;\n}\n\n.playing {\n display: flex;\n position: relative;\n justify-content: center;\n gap: 1px;\n width: 30px;\n height: 20px;\n}\n\n.greenline {\n background-color: #1db954;\n height: 20px;\n width: 2px;\n position: relative;\n transform-origin: bottom;\n}\n\n.line-1 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.2s;\n}\n\n.line-2 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.5s;\n}\n\n.line-3 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.6s;\n}\n\n.line-4 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0s;\n}\n\n.line-5 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.4s;\n}\n\n@keyframes playing {\n 0% {\n transform: scaleY(0.1);\n }\n\n 33% {\n transform: scaleY(0.6);\n }\n\n 66% {\n transform: scaleY(0.9);\n }\n\n 100% {\n transform: scaleY(0.1);\n }\n}"}

rare-quail-42

👁 实时预览

📝 源代码

🔗 相关联的样式