{"html":"

Page Not Found

\n 4O4\n 4O4\n 4O4\n

\n Error\n Error\n Error\n

The requested page could not be found

\n","css":".card {\n width: 280px;\n height: 280px;\n background: linear-gradient(135deg, #05062d, #02012a);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 2px solid rgba(0, 234, 255, 0.3);\n border-radius: 20px;\n padding: 20px;\n position: relative;\n overflow: hidden;\n text-align: center;\n cursor: pointer;\n box-shadow:\n 0 0 15px rgba(0, 234, 255, 0.2),\n 0 0 30px rgba(151, 65, 252, 0.15);\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 22px;\n border: 2px solid transparent;\n background: linear-gradient(\n 135deg,\n rgba(0, 234, 255, 0.8),\n rgba(139, 0, 255, 0.6)\n )\n border-box;\n -webkit-mask:\n linear-gradient(#fff 0 0) padding-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.card:hover::before {\n opacity: 1;\n animation: pulse 2.5s infinite ease-in-out;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n}\n\n.card:hover {\n transform: scale(1.03);\n box-shadow:\n 0 0 20px rgba(0, 234, 255, 0.3),\n 0 0 40px rgba(151, 65, 252, 0.2);\n}\n\n.error-message {\n font-size: 18px;\n font-weight: 600;\n color: #00eaff;\n text-transform: uppercase;\n margin-bottom: 10px;\n animation: fade-in 1.5s ease-out;\n text-shadow: 0 0 8px rgba(0, 234, 255, 0.5);\n letter-spacing: 1px;\n}\n\n.error-title {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 42px;\n font-weight: 900;\n color: #ffffff;\n text-transform: uppercase;\n position: relative;\n line-height: 1;\n letter-spacing: 3px;\n margin: 15px 0;\n}\n\n.error-item {\n position: relative;\n margin: 5px 0;\n}\n\n.error-title span {\n position: relative;\n z-index: 1;\n text-shadow:\n 2px 2px 0 #fded00,\n -2px -2px 0 #00eaff;\n}\n\n.error-title .error-glitch {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-shadow:\n 2px 2px 0 #00e572,\n -2px -2px 0 #8b00ff;\n clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);\n animation: glitch 2.5s infinite linear alternate;\n opacity: 0.8;\n}\n\n.error-title .error-glitch--secondary {\n text-shadow:\n -2px -2px 0 #ff3366,\n 2px 2px 0 #00ccff;\n clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);\n animation-delay: 0.5s;\n}\n\n.error-title:hover .error-glitch {\n display: block;\n}\n\n@keyframes glitch {\n 0% {\n clip-path: polygon(\n 0 2%,\n 100% 2%,\n 100% 95%,\n 95% 95%,\n 95% 90%,\n 85% 90%,\n 85% 95%,\n 8% 95%,\n 0 70%\n );\n }\n 2%,\n 8% {\n clip-path: polygon(\n 0 78%,\n 100% 78%,\n 100% 100%,\n 95% 100%,\n 95% 90%,\n 85% 90%,\n 85% 100%,\n 8% 100%,\n 0 78%\n );\n transform: translate(-5%, 0);\n }\n 6% {\n clip-path: polygon(\n 0 78%,\n 100% 78%,\n 100% 100%,\n 95% 100%,\n 95% 90%,\n 85% 90%,\n 85% 100%,\n 8% 100%,\n 0 78%\n );\n transform: translate(5%, 0);\n }\n 9% {\n clip-path: polygon(\n 0 78%,\n 100% 78%,\n 100% 100%,\n 95% 100%,\n 95% 90%,\n 85% 90%,\n 85% 100%,\n 8% 100%,\n 0 78%\n );\n transform: translate(0, 0);\n }\n 25% {\n clip-path: polygon(\n 0 0,\n 100% 0,\n 100% 0,\n 95% 0,\n 95% 0,\n 85% 0,\n 85% 0,\n 8% 0,\n 0 0\n );\n transform: translate(5%, 0);\n }\n 30% {\n clip-path: polygon(\n 0 0,\n 100% 0,\n 100% 0,\n 95% 0,\n 95% 0,\n 85% 0,\n 85% 0,\n 8% 0,\n 0 0\n );\n transform: translate(-5%, 0);\n }\n 35%,\n 45% {\n clip-path: polygon(\n 0 40%,\n 100% 40%,\n 100% 85%,\n 95% 85%,\n 95% 85%,\n 85% 85%,\n 85% 85%,\n 8% 85%,\n 0 70%\n );\n transform: translate(-5%);\n }\n 50% {\n clip-path: polygon(\n 0 40%,\n 100% 40%,\n 100% 85%,\n 95% 85%,\n 95% 85%,\n 85% 85%,\n 85% 85%,\n 8% 85%,\n 0 70%\n );\n transform: translate(0, 0);\n }\n}\n\n.error-description {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n margin-top: 15px;\n animation: fade-in 2s ease-out;\n max-width: 80%;\n line-height: 1.4;\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 480px) {\n .card {\n width: 240px;\n height: 240px;\n padding: 15px;\n }\n .error-title {\n font-size: 36px;\n }\n}\n"}

orange-robin-97

👁 实时预览

📝 源代码