{"html":"

\n","css":".card-6 {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n perspective: 900px;\n margin: 34px 0;\n}\n\n.card-6__holo {\n position: relative;\n width: 140px;\n height: 140px;\n border-radius: 26px;\n transform-style: preserve-3d;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n animation: card6-wobble 6.2s ease-in-out infinite;\n}\n\n@keyframes card6-wobble {\n 0% {\n transform: rotateX(16deg) rotateY(-18deg);\n }\n 50% {\n transform: rotateX(18deg) rotateY(18deg);\n }\n 100% {\n transform: rotateX(16deg) rotateY(-18deg);\n }\n}\n\n.card-6__layer {\n position: absolute;\n font-weight: 900;\n font-size: 108px;\n letter-spacing: -6px;\n line-height: 1;\n\n -webkit-text-stroke: 1px rgba(0, 123, 255, 0.7);\n\n background: linear-gradient(\n 90deg,\n rgba(0, 123, 255, 0.18) 0%,\n rgba(0, 123, 255, 0.92) 35%,\n rgba(0, 180, 255, 0.7) 60%,\n rgba(0, 123, 255, 0.22) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n\n filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));\n opacity: 0.95;\n transform-style: preserve-3d;\n}\n\n.card-6__layer--back {\n opacity: 0.18;\n filter: blur(1px);\n transform: translateZ(-70px);\n -webkit-text-stroke: 1px rgba(0, 123, 255, 0.45);\n}\n.card-6__layer--mid {\n opacity: 0.42;\n filter: blur(0.4px);\n transform: translateZ(-34px);\n -webkit-text-stroke: 1px rgba(0, 123, 255, 0.55);\n}\n.card-6__layer--front {\n opacity: 0.98;\n transform: translateZ(0px);\n -webkit-text-stroke: 1px rgba(0, 123, 255, 0.78);\n}\n\n.card-6__holo::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 26px;\n background: radial-gradient(\n circle at 40% 35%,\n rgba(0, 123, 255, 0.14),\n rgba(0, 0, 0, 0) 62%\n );\n filter: blur(8px);\n opacity: 0.9;\n transform: translateZ(-80px);\n}\n\n.card-6__holo::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 26px;\n border: 1px solid rgba(0, 123, 255, 0.16);\n background: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0.05),\n rgba(255, 255, 255, 0.01) 45%,\n rgba(0, 0, 0, 0)\n );\n opacity: 0.55;\n transform: translateZ(-45px);\n}\n\n@media (max-width: 600px) {\n .card-6__holo {\n width: 128px;\n height: 128px;\n border-radius: 24px;\n }\n .card-6__layer {\n font-size: 96px;\n letter-spacing: -5px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .card-6__holo {\n animation: none !important;\n }\n}\n"}

helpless-penguin-80

👁 实时预览

📝 源代码