{"html":"

\n \n \n 1H\n \n \n \n 1D\n \n \n \n 1W\n \n \n \n 1M\n \n \n \n ALL\n \n

BTC 70K

-2.92%

\n \n \n

\n \n \n \n \n

\n","css":".container-card-charts {\n position: relative;\n width: 300px;\n height: 300px;\n background: linear-gradient(\n to top,\n rgba(255, 255, 255),\n rgba(255, 255, 255, 0.1)\n );\n border-radius: 32px;\n padding: 1.6px;\n box-shadow: 0 0px 80px -10px rgba(255, 255, 255, 0.15);\n}\n.container-card-charts::before {\n position: absolute;\n content: \"\";\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 80px;\n background-color: #777777;\n z-index: -10;\n filter: blur(70px);\n}\n.card-charts {\n width: 100%;\n height: 100%;\n background: radial-gradient(ellipse at center, #1b1b1b, #000000);\n border-radius: 32px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.charts-lines {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.charts-lines i {\n position: absolute;\n inset: 0;\n display: flex;\n width: 100%;\n height: 100%;\n}\n.lines {\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: space-between;\n}\n.lines span {\n width: 1.5px;\n height: 100%;\n margin: 0 18px;\n background: linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0.025) 50%,\n rgba(255, 255, 255, 0) 100%\n );\n}\n.tags-card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n}\n.tags-card .radio {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n border-radius: 12px;\n color: #a7a7a7;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-size: 8px;\n font-weight: 600;\n cursor: pointer;\n}\n.tags-card .radio:hover {\n color: #ffffff;\n}\n.tags-card .radio input {\n display: none;\n}\n\n.tags-card .radio .name {\n width: 100%;\n padding: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n z-index: 1;\n}\n\n.tags-card .radio input:checked + .name {\n color: #ffffff;\n background: linear-gradient(15deg, #898989, #181818, #000000);\n transform: scale(1.1);\n}\n\n.tags-card .radio input:checked + .name::before {\n position: absolute;\n background-color: #212121;\n content: \"\";\n inset: 1px;\n z-index: -1;\n border-radius: 12px;\n}\n\n.main-texts {\n display: flex;\n flex-direction: column;\n padding: 0 20px;\n font-weight: 500;\n}\n.main-texts .title {\n background-image: linear-gradient(to top left, #92400e, #f9d86d, #a6a6a6);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n}\n.main-texts .change {\n background-image: linear-gradient(to right, #8e1414, #ffffff, #ffffff);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n}\n.charts-lines path {\n opacity: 0;\n}\n.card-charts svg {\n transition: transform 0.5s ease;\n}\n.card-charts:hover svg {\n transform: scale(1.5);\n}\n.icon-week path {\n animation: draw 8s ease infinite;\n}\n.icon-month path {\n animation: draw 8s 3s ease infinite;\n}\n\n@keyframes draw {\n 0% {\n stroke-dashoffset: 1500;\n opacity: 0.8;\n }\n 50% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: -1500;\n opacity: 0.8;\n }\n}\n"}

selfish-hound-50

👁 实时预览

📝 源代码