{"html":"

\n X\n \n \n \n \n \n \n

\n Y\n \n \n \n

\n Z\n \n \n \n

\n \n\n

\n","css":".wrap_card {\n position: relative;\n overflow: hidden;\n width: var(--w-wrap-card);\n height: calc(var(--h-card) / 1.25);\n display: flex;\n align-items: center;\n justify-content: center;\n --w-card: 150px;\n --h-card: 200px;\n --rotate-card: 15deg;\n --insetX-card: 28px;\n --t-card: calc(var(--insetX-card) * 1.25);\n --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));\n}\n\n.content {\n background-color: #ffffff50;\n overflow: hidden;\n position: relative;\n width: calc(100% - calc(var(--pd) * 2));\n height: calc(100% - calc(var(--pd) * 2));\n border-radius: calc(var(--round) - var(--pd));\n}\n.content > span {\n font-size: 300px;\n font-weight: 800;\n line-height: 0.75;\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 50% 0 0 50%;\n transform: translate(-50%, -50%);\n background-clip: text;\n -webkit-text-stroke-width: 3px;\n color: transparent;\n opacity: 0;\n background-image: linear-gradient(-45deg, #ffffff25 0%, #ffffffac 100%);\n animation: opacity 0s cubic-bezier(1, 0, 0, 1) forwards var(--delay) reverse;\n}\n.content > svg {\n height: 66px;\n width: 66px;\n position: absolute;\n inset: 50% 0 0 50%;\n opacity: 1;\n animation: opacity 8.4s cubic-bezier(1, 0, 0, 1) forwards\n calc(var(--delay) - 4.3s);\n transform: translate(-50%, -50%);\n}\n.card:nth-child(1) {\n --delay: 4.3s;\n}\n.card:nth-child(2) {\n --delay: 7.3s;\n}\n.card:nth-child(3) {\n --delay: 10.3s;\n}\n@keyframes opacity {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n.card {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n overflow: hidden;\n animation: rotating 9s cubic-bezier(0.75, 0, 0, 1.01) infinite 0s;\n border-radius: var(--round);\n background: var(--bg);\n order: var(--order);\n width: var(--w-card);\n height: var(--h-card);\n z-index: var(--z1);\n top: var(--t1);\n left: var(--l1);\n right: var(--r1);\n transform: var(--trans1);\n --pd: 4px;\n --round: 16px;\n --x1: var(--insetX-card);\n --x2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card)));\n --to-left: rotate(calc(var(--rotate-card) * -1));\n --to-center: calc(var(--w-card) / 2);\n --to-right: rotate(calc(var(--rotate-card) * 1));\n}\n\n.card:nth-child(1) {\n --order: 2;\n --bg: radial-gradient(\n circle,\n rgba(252, 240, 142, 1) 0%,\n rgba(246, 173, 32, 1) 40%,\n rgba(192, 142, 8, 1) 100%\n );\n --z1: 2;\n --t1: 0;\n --l1: var(--to-center);\n --r1: var(--to-center);\n --trans1: rotate(calc(var(--rotate-card) * 0));\n --z2: 0;\n --t2: var(--t-card);\n --l2: var(--x1);\n --r2: var(--x2);\n --trans2: var(--to-left);\n --z3: 0;\n --t3: var(--t-card);\n --l3: var(--x2);\n --r3: var(--x1);\n --trans3: var(--to-right);\n}\n.card:nth-child(2) {\n --order: 3;\n --bg: radial-gradient(\n circle,\n rgba(142, 249, 252, 1) 0%,\n rgba(32, 164, 246, 1) 40%,\n rgba(8, 81, 192, 1) 100%\n );\n --z1: 0;\n --t1: var(--t-card);\n --l1: var(--x2);\n --r1: var(--x1);\n --trans1: var(--to-right);\n --z2: 2;\n --t2: 0;\n --l2: var(--to-center);\n --r2: var(--to-center);\n --trans2: rotate(calc(var(--rotate-card) * 0));\n --z3: 0;\n --t3: var(--t-card);\n --l3: var(--x1);\n --r3: var(--x2);\n --trans3: var(--to-left);\n}\n.card:nth-child(3) {\n --order: 1;\n --bg: radial-gradient(\n circle,\n rgba(222, 128, 233, 1) 0%,\n rgba(213, 32, 246, 1) 40%,\n rgba(139, 6, 157, 1) 100%\n );\n --z1: 0;\n --t1: var(--t-card);\n --l1: var(--x1);\n --r1: var(--x2);\n --trans1: var(--to-left);\n --z2: 0;\n --t2: var(--t-card);\n --l2: var(--x2);\n --r2: var(--x1);\n --trans2: var(--to-right);\n --z3: 2;\n --t3: 0;\n --l3: var(--to-center);\n --r3: var(--to-center);\n --trans3: rotate(calc(var(--rotate-card) * 0));\n}\n@keyframes rotating {\n 0%,\n 99.99% {\n z-index: var(--z1);\n top: var(--t1);\n left: var(--l1);\n right: var(--r1);\n transform: var(--trans1);\n }\n 33.33% {\n z-index: var(--z2);\n top: var(--t2);\n left: var(--l2);\n right: var(--r2);\n transform: var(--trans2);\n }\n 66.66% {\n z-index: var(--z3);\n top: var(--t3);\n left: var(--l3);\n right: var(--r3);\n transform: var(--trans3);\n }\n}\n\n.lines {\n position: absolute;\n inset: auto 0 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 4;\n}\n.lines::after {\n content: \"\";\n width: 100%;\n height: 0px;\n position: absolute;\n z-index: 2;\n inset: 0;\n --mask-bg: #e8e8e8;\n background: var(--mask-bg);\n mask-image: radial-gradient(\n 50% 200px at top,\n transparent 20%,\n var(--mask-bg)\n );\n}\n\n.line {\n position: absolute;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.line::before,\n.line::after {\n content: \"\";\n position: absolute;\n inset: auto;\n background: linear-gradient(\n to right,\n var(--gradient-a-line, #0000),\n var(--gradient-b-line, #0000),\n var(--gradient-c-line, #0000)\n );\n filter: var(--blur-line);\n width: var(--w-line);\n height: var(--h-line);\n}\n.line:nth-child(1)::before {\n --blur-line: blur(4px);\n --w-line: 100%;\n --h-line: 5px;\n --gradient-b-line: #2f69f2;\n}\n.line:nth-child(1)::after {\n --w-line: 100%;\n --h-line: 1px;\n --gradient-b-line: #6366f1;\n}\n.line:nth-child(2)::before {\n --blur-line: blur(4px);\n --w-line: 50%;\n --h-line: 5px;\n --gradient-b-line: #84ccfc;\n}\n.line:nth-child(2)::after {\n --w-line: 50%;\n --h-line: 1px;\n --gradient-b-line: #14d3f5;\n}\n"}

blue-wombat-46

👁 实时预览

📝 源代码