{"html":"\n","css":".phantom-btn {\n position: relative;\n appearance: none;\n border: none;\n background: none;\n padding: 80px;\n perspective: 1000px;\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Impact, \"Arial Black\", sans-serif;\n}\n\n.ptrig {\n position: absolute;\n z-index: 100;\n width: 33.33%;\n height: 33.33%;\n}\n.p-1 {\n top: 0;\n left: 0;\n}\n.p-2 {\n top: 0;\n left: 33.33%;\n}\n.p-3 {\n top: 0;\n right: 0;\n}\n.p-4 {\n top: 33.33%;\n left: 0;\n}\n.p-5 {\n top: 33.33%;\n left: 33.33%;\n}\n.p-6 {\n top: 33.33%;\n right: 0;\n}\n.p-7 {\n bottom: 0;\n left: 0;\n}\n.p-8 {\n bottom: 0;\n left: 33.33%;\n}\n.p-9 {\n bottom: 0;\n right: 0;\n}\n\n.phantom-wrapper {\n position: relative;\n width: max-content;\n transform-style: preserve-3d;\n transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);\n}\n\n/* --- Shatter Background Layers --- */\n.shard-layer {\n position: absolute;\n inset: -20px;\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.layer-1 {\n background: #000;\n clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);\n transform: rotate(-2deg);\n z-index: 1;\n}\n\n.layer-2 {\n background: #e60012; /* Phantom Red */\n clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20%);\n transform: rotate(1deg) translate(4px, 4px);\n z-index: 2;\n}\n\n.layer-3 {\n background: #fff;\n border: 4px solid #000;\n clip-path: polygon(0% 0%, 95% 0%, 100% 15%, 100% 100%, 5% 100%, 0% 85%);\n transform: rotate(0deg);\n z-index: 3;\n /* Pattern */\n background-image: radial-gradient(#000 1px, transparent 1px);\n background-size: 8px 8px;\n}\n\n.phantom-btn:hover .layer-1 {\n transform: rotate(-4deg) scale(1.05) translate(-10px, -5px);\n}\n\n.phantom-btn:hover .layer-2 {\n transform: rotate(3deg) scale(1.05) translate(10px, 5px);\n}\n\n.phantom-btn:hover .layer-3 {\n transform: scale(1.02);\n}\n\n/* --- Ransom Note Text --- */\n.heist-content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px 36px;\n gap: 20px;\n z-index: 10;\n transform-style: preserve-3d;\n}\n\n.ransom-row {\n display: flex;\n gap: 2px;\n align-items: center;\n transform-style: preserve-3d;\n}\n\n.spacer {\n width: 10px;\n}\n\n.note-block {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 6px;\n border: 2px solid #000;\n transform: rotate(calc(var(--i) * 3deg - 15deg));\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 2px 2px 0 #000;\n}\n\n.b-w {\n background: #fff;\n color: #000;\n}\n.b-b {\n background: #000;\n color: #fff;\n transform: rotate(calc(var(--i) * -2deg + 10deg)) translateY(4px);\n}\n\n.txt {\n font-size: 28px;\n font-weight: 900;\n line-height: 1;\n text-transform: uppercase;\n}\n\n.phantom-btn:hover .note-block {\n /* Chaotic Jitter */\n transform: rotate(0deg) translateY(0);\n animation: ransomShake 0.4s infinite alternate;\n animation-delay: calc(var(--i) * 0.05s);\n}\n\n.phantom-btn:hover .b-w {\n background: #e60012;\n color: #fff;\n}\n\n@keyframes ransomShake {\n 0% {\n transform: translateY(0) rotate(5deg) scale(1);\n }\n 100% {\n transform: translateY(-4px) rotate(-5deg) scale(1.1);\n }\n}\n\n/* --- Calling Card Chip --- */\n.card-socket {\n width: 50px;\n height: 34px;\n position: relative;\n perspective: 600px;\n}\n\n.calling-card {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n transform-origin: center center;\n}\n\n.card-face {\n position: absolute;\n inset: 0;\n backface-visibility: hidden;\n border: 2px solid #000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.front {\n background: #000;\n transform: rotateY(0deg);\n}\n\n.back {\n background: #e60012;\n transform: rotateY(180deg);\n}\n\n.mask-icon,\n.star-icon {\n width: 24px;\n height: 24px;\n}\n\n.phantom-btn:hover .calling-card {\n transform: rotateY(180deg) scale(1.2) rotateZ(10deg);\n}\n\n/* --- Action Star Background --- */\n.action-star {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n background: #000;\n clip-path: polygon(\n 50% 0%,\n 61% 35%,\n 98% 35%,\n 68% 57%,\n 79% 91%,\n 50% 70%,\n 21% 91%,\n 32% 57%,\n 2% 35%,\n 39% 35%\n );\n transform: translate(-50%, -50%) scale(0) rotate(0deg);\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n z-index: 0;\n pointer-events: none;\n}\n\n.phantom-btn:hover .action-star {\n transform: translate(-50%, -50%) scale(1.4) rotate(180deg);\n}\n\n/* --- Parallax Tilt (Disorienting) --- */\n/* The shards move opposite to the content to create depth */\n\n.phantom-btn:has(.p-1:hover) .phantom-wrapper {\n transform: rotateX(15deg) rotateY(-15deg);\n}\n.phantom-btn:has(.p-1:hover) .layer-1 {\n transform: translate(15px, 15px);\n}\n.phantom-btn:has(.p-1:hover) .layer-2 {\n transform: translate(10px, 10px);\n}\n\n.phantom-btn:has(.p-2:hover) .phantom-wrapper {\n transform: rotateX(15deg);\n}\n.phantom-btn:has(.p-2:hover) .layer-1 {\n transform: translateY(15px);\n}\n\n.phantom-btn:has(.p-3:hover) .phantom-wrapper {\n transform: rotateX(15deg) rotateY(15deg);\n}\n.phantom-btn:has(.p-3:hover) .layer-1 {\n transform: translate(-15px, 15px);\n}\n.phantom-btn:has(.p-3:hover) .layer-2 {\n transform: translate(-10px, 10px);\n}\n\n.phantom-btn:has(.p-4:hover) .phantom-wrapper {\n transform: rotateY(-15deg);\n}\n.phantom-btn:has(.p-4:hover) .layer-1 {\n transform: translateX(15px);\n}\n\n.phantom-btn:has(.p-5:hover) .phantom-wrapper {\n transform: scale(1.05);\n}\n\n.phantom-btn:has(.p-6:hover) .phantom-wrapper {\n transform: rotateY(15deg);\n}\n.phantom-btn:has(.p-6:hover) .layer-1 {\n transform: translateX(-15px);\n}\n\n.phantom-btn:has(.p-7:hover) .phantom-wrapper {\n transform: rotateX(-15deg) rotateY(-15deg);\n}\n.phantom-btn:has(.p-7:hover) .layer-1 {\n transform: translate(15px, -15px);\n}\n.phantom-btn:has(.p-7:hover) .layer-2 {\n transform: translate(10px, -10px);\n}\n\n.phantom-btn:has(.p-8:hover) .phantom-wrapper {\n transform: rotateX(-15deg);\n}\n.phantom-btn:has(.p-8:hover) .layer-1 {\n transform: translateY(-15px);\n}\n\n.phantom-btn:has(.p-9:hover) .phantom-wrapper {\n transform: rotateX(-15deg) rotateY(15deg);\n}\n.phantom-btn:has(.p-9:hover) .layer-1 {\n transform: translate(-15px, -15px);\n}\n.phantom-btn:has(.p-9:hover) .layer-2 {\n transform: translate(-10px, -10px);\n}\n\n/* --- \"Take Your Heart\" Click --- */\n.phantom-btn:active .phantom-wrapper {\n transform: scale(0.95) !important;\n}\n\n.phantom-btn:active .layer-1,\n.phantom-btn:active .layer-2,\n.phantom-btn:active .layer-3 {\n background: #000;\n border-color: #e60012;\n clip-path: none;\n border-radius: 8px;\n}\n\n.phantom-btn:active .note-block {\n background: #fff;\n color: #000;\n border-color: #000;\n animation: none;\n transform: rotate(0) !important;\n}\n\n.phantom-btn:active .calling-card {\n transform: rotateY(180deg) scale(0.8);\n}\n"}

slippery-dodo-78

👁 实时预览

📝 源代码