{"html":"

\n \n\n

\n \n BTC \n\n \n ETH \n\n \n SOL \n\n \n TET \n\n

\n\n

$57,256.15

\n 12.458 BTC\n +10.4%\n

\n\n

$3,452.12

\n 34.123 ETH\n +8.2%\n

\n\n

$145.78

\n 150.78 SOL\n +12.1%\n

\n\n

$1.00

\n 10,000 TET\n +0.0%\n

\n\n

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

\n","css":".crypto-card {\n max-width: 360px;\n width: 90%;\n padding: 20px;\n border-radius: 35px;\n background: #000;\n color: #fff;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n.logo {\n font-weight: bold;\n font-size: 1.2em;\n}\n.open {\n font-size: 0.85em;\n color: #888;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.open:hover {\n color: #fff;\n}\n\n.crypto-switch {\n position: relative;\n display: flex;\n background: #222;\n border-radius: 20px;\n padding: 4px;\n gap: 8px;\n margin-bottom: 16px;\n user-select: none;\n}\n.crypto-switch input {\n display: none;\n}\n.crypto-switch label {\n flex: 1;\n text-align: center;\n padding: 8px 0;\n border-radius: 16px;\n cursor: pointer;\n color: #cccccc;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: color 0.3s;\n font-size: 0.9em;\n}\n.crypto-switch input:checked + label {\n color: #ffffff;\n}\n\n.crypto-switch .slider {\n position: absolute;\n top: 4px;\n bottom: 4px;\n width: calc((100% - 24px) / 4);\n background: rgba(255, 255, 255, 0.4);\n -webkit-backdrop-filter: blur(1px);\n backdrop-filter: blur(0.5px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 16px;\n z-index: 1;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-shadow:\n 0 4px 8px rgba(0, 0, 0, 0.4),\n inset 0 -2px 4px rgba(255, 255, 255, 0.2);\n}\n.crypto-switch input:hover + label {\n color: #ffffff;\n}\n#bitcoin:checked ~ .slider {\n transform: translateX(0%);\n}\n#ethereum:checked ~ .slider {\n transform: translateX(105%);\n}\n#solana:checked ~ .slider {\n transform: translateX(214%);\n}\n#tether:checked ~ .slider {\n transform: translateX(323%);\n}\n\n.price-infos {\n margin-bottom: 16px;\n}\n.price-info .price {\n font-size: 1.6em;\n font-weight: bold;\n margin-bottom: 4px;\n}\n.price-info .stats {\n display: flex;\n justify-content: space-between;\n font-size: 0.9em;\n}\n.price-info .change {\n color: #0f0;\n font-weight: bold;\n}\n\n.chart {\n height: 90px;\n background: #1b1b1b;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n.chart svg {\n width: 100%;\n height: 100%;\n display: none;\n transform: translateX(2px) scale(1.05);\n}\n.chart path {\n stroke: #0f0;\n stroke-width: 0.7;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 500;\n stroke-dashoffset: 500;\n animation: draw 3s forwards;\n fill: rgba(0, 255, 0, 0.2);\n}\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.crypto-card:has(#bitcoin:checked) .chart #chart-bitcoin,\n.crypto-card:has(#ethereum:checked) .chart #chart-ethereum,\n.crypto-card:has(#solana:checked) .chart #chart-solana,\n.crypto-card:has(#tether:checked) .chart #chart-tether {\n display: block;\n}\n\n.price-info {\n display: none;\n}\n.crypto-card:has(#bitcoin:checked) .price-info.bitcoin,\n.crypto-card:has(#ethereum:checked) .price-info.ethereum,\n.crypto-card:has(#solana:checked) .price-info.solana,\n.crypto-card:has(#tether:checked) .price-info.tether {\n display: block;\n}\n"}

afraid-baboon-28

👁 实时预览

📝 源代码