{"html":"

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

Finance

\n \n \n \n \n +1200 Active Users\n

\n \n \n \n \n 99.9% Uptime\n

\n \n \n \n \n AI Powered\n

Smart Investment

\n Advanced portfolio management with real-time analytics and automated\n trading strategies for optimal returns.\n

\n \n \n

\n","css":".card {\n background: linear-gradient(\n 145deg,\n #0f0f23 0%,\n #1a1a2e 25%,\n #16213e 75%,\n #0f1419 100%\n );\n border-radius: 20px;\n padding: 24px;\n border: 1px solid rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(15px);\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.03),\n inset 0 1px 0 rgba(255, 255, 255, 0.05),\n inset 0 -1px 0 rgba(0, 0, 0, 0.2);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n max-width: 500px;\n height: 350px;\n display: flex;\n flex-direction: column;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(102, 126, 234, 0.3),\n rgba(118, 75, 162, 0.3),\n transparent\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(\n circle at 50% 0%,\n rgba(102, 126, 234, 0.03) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n pointer-events: none;\n}\n\n.card:hover {\n transform: translateY(-12px) scale(1.02);\n box-shadow:\n 0 25px 50px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.08),\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\n 0 0 30px rgba(102, 126, 234, 0.15);\n border-color: rgba(102, 126, 234, 0.2);\n}\n\n.card:hover::before {\n opacity: 1;\n}\n\n.card:hover::after {\n opacity: 1;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.icon {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);\n background-size: 200% 200%;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n box-shadow:\n 0 4px 15px rgba(102, 126, 234, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n inset 0 -1px 0 rgba(0, 0, 0, 0.2);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n}\n\n.icon::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n transition: left 0.6s ease;\n}\n\n.icon svg {\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.icon svg.dollar-icon {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1) rotate(0deg);\n}\n\n.icon svg.chart-icon {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);\n}\n\n.card:hover .icon {\n transform: scale(1.1) rotate(5deg);\n box-shadow:\n 0 8px 25px rgba(102, 126, 234, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3);\n background-position: 100% 100%;\n}\n\n.card:hover .icon::before {\n left: 100%;\n}\n\n.card:hover .icon svg.dollar-icon {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8) rotate(10deg);\n}\n\n.card:hover .icon svg.chart-icon {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1) rotate(0deg);\n}\n\n.badge {\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #ff6b6b 100%);\n background-size: 200% 200%;\n color: white;\n padding: 8px 16px;\n border-radius: 24px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow:\n 0 2px 8px rgba(255, 107, 107, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.card:hover .badge {\n box-shadow:\n 0 4px 12px rgba(255, 107, 107, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n text-shadow:\n 0 0 8px #fff,\n 0 0 16px #ff6b6b,\n 0 0 24px #ee5a24;\n}\n\n.card-content {\n flex: 1;\n margin-bottom: 20px;\n padding: 8px 0 0 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.card-content .card-title {\n font-size: 22px;\n font-weight: 700;\n margin-bottom: 14px;\n background: linear-gradient(90deg, #fff 0%, #b8b8ff 50%, #fff 100%);\n background-size: 200% 100%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n text-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);\n letter-spacing: 0.01em;\n line-height: 1.25;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.card:hover .card-title {\n background-position: 100% 0%;\n text-shadow: 0 2px 20px rgba(102, 126, 234, 0.15);\n}\n\n.card-content .card-desc {\n font-size: 15px;\n line-height: 1.7;\n color: #c7d0e6;\n font-weight: 400;\n text-shadow: 0 1px 6px rgba(30, 34, 54, 0.1);\n letter-spacing: 0.01em;\n margin-bottom: 0;\n}\n\n.card-footer {\n display: flex;\n gap: 12px;\n margin-top: auto;\n}\n\n.btn-primary,\n.btn-secondary {\n padding: 10px 16px;\n border-radius: 8px;\n border: none;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: \"Inter\", sans-serif;\n flex: 1;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.btn-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);\n background-size: 200% 200%;\n color: white;\n box-shadow:\n 0 4px 15px rgba(102, 126, 234, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n inset 0 -1px 0 rgba(0, 0, 0, 0.2);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n}\n\n.btn-primary::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n transition: left 0.6s ease;\n}\n\n.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow:\n 0 8px 25px rgba(102, 126, 234, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3);\n background-position: 100% 100%;\n}\n\n.btn-primary:hover::before {\n left: 100%;\n}\n\n.btn-secondary {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.05) 0%,\n rgba(255, 255, 255, 0.02) 100%\n );\n color: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(15px);\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n}\n\n.btn-secondary::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.1),\n transparent\n );\n transition: left 0.6s ease;\n}\n\n.btn-secondary:hover {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0.05) 100%\n );\n border-color: rgba(255, 255, 255, 0.25);\n transform: translateY(-3px);\n box-shadow:\n 0 6px 20px rgba(0, 0, 0, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.15);\n}\n\n.btn-secondary:hover::before {\n left: 100%;\n}\n\n.btn-icon {\n display: inline-flex;\n align-items: center;\n margin-right: 8px;\n vertical-align: middle;\n}\n\n.btn-primary .btn-icon svg,\n.btn-secondary .btn-icon svg {\n display: block;\n color: #fff;\n width: 18px;\n height: 18px;\n}\n\n.btn-secondary .btn-icon svg {\n color: #bcbcbc;\n}\n\n.card-info-bar {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 18px;\n margin-bottom: 18px;\n margin-top: 0;\n flex-wrap: wrap;\n padding-left: 2px;\n}\n\n.info-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #bfc9e6;\n background: linear-gradient(\n 135deg,\n rgba(30, 34, 54, 0.9) 0%,\n rgba(30, 34, 54, 0.7) 100%\n );\n border-radius: 7px;\n padding: 2px 10px 2px 6px;\n font-weight: 500;\n box-shadow:\n 0 1px 4px 0 rgba(80, 80, 120, 0.07),\n inset 0 1px 0 rgba(255, 255, 255, 0.05);\n line-height: 1.2;\n min-width: 0;\n white-space: nowrap;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n border: 1px solid rgba(255, 255, 255, 0.03);\n}\n\n.card:hover .info-item {\n background: linear-gradient(\n 135deg,\n rgba(30, 34, 54, 0.95) 0%,\n rgba(30, 34, 54, 0.8) 100%\n );\n box-shadow:\n 0 2px 8px 0 rgba(80, 80, 120, 0.1),\n 0 0 8px 2px rgba(102, 126, 234, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.08);\n border-color: rgba(102, 126, 234, 0.4);\n}\n\n.info-item .info-icon {\n display: block;\n min-width: 16px;\n min-height: 16px;\n}\n\n@media (max-width: 768px) {\n .card {\n max-width: 100%;\n height: auto;\n min-height: 260px;\n }\n .card-content .card-title {\n font-size: 18px;\n }\n .card-content .card-desc {\n font-size: 13px;\n }\n}\n\n@media (max-width: 480px) {\n .card {\n padding: 20px;\n }\n .card-header {\n margin-bottom: 16px;\n }\n .icon {\n width: 40px;\n height: 40px;\n }\n .card-content .card-title {\n font-size: 16px;\n }\n .btn-primary,\n .btn-secondary {\n padding: 8px 12px;\n font-size: 12px;\n }\n .card-info-bar {\n gap: 10px;\n margin-bottom: 12px;\n padding-left: 0;\n }\n .info-item {\n font-size: 11px;\n padding: 2px 7px 2px 5px;\n }\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.card {\n animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n}\n\n.card:nth-child(1) {\n animation-delay: 0.1s;\n}\n.card:nth-child(2) {\n animation-delay: 0.2s;\n}\n.card:nth-child(3) {\n animation-delay: 0.3s;\n}\n.card:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.card:hover {\n box-shadow:\n 0 25px 50px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.08),\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\n 0 0 30px rgba(102, 126, 234, 0.15);\n}\n"}

wicked-fish-58

👁 实时预览

📝 源代码