{"html":"

CHAOTIC

\n \n \n \n \n

\n","css":".chaos-terminal {\n width: 250px;\n height: 100px;\n position: relative;\n cursor: pointer;\n transform-style: preserve-3d;\n}\n\n.main-frame {\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n #000 0%,\n #fff 2%,\n #000 4%,\n #fff 6%,\n #000 8%,\n #fff 10%,\n #000 100%\n ),\n repeating-linear-gradient(0deg, #000 0px, #000 1px, #fff 1px, #fff 2px);\n border: 4px solid #000;\n position: relative;\n overflow: visible;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow:\n 0 0 0 2px #fff,\n 0 0 0 4px #000,\n 0 0 0 6px #fff,\n 0 0 0 8px #000,\n 8px 8px 0 8px #00ffff,\n 16px 16px 0 8px rgba(0, 0, 0, 0.8);\n}\n\n.main-frame::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-conic-gradient(\n from 0deg,\n #000 0deg,\n #000 5deg,\n #fff 5deg,\n #fff 10deg\n ),\n repeating-linear-gradient(\n 45deg,\n transparent 0px,\n transparent 3px,\n #00ffff 3px,\n #00ffff 4px\n );\n opacity: 4%;\n animation: patternShift 3s linear infinite;\n}\n\n.chaos-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-weight: 900;\n font-size: 16px;\n color: #000;\n text-transform: uppercase;\n letter-spacing: 2px;\n z-index: 10;\n text-shadow:\n 1px 1px 0 #fff,\n -1px -1px 0 #fff,\n 1px -1px 0 #fff,\n -1px 1px 0 #fff,\n 2px 2px 0 #00ffff;\n animation: textGlitch 2s linear infinite;\n}\n\n@keyframes textGlitch {\n 0%,\n 100% {\n transform: translate(-50%, -50%);\n }\n 10% {\n transform: translate(-51%, -49%);\n }\n 20% {\n transform: translate(-49%, -51%);\n }\n 30% {\n transform: translate(-52%, -50%);\n }\n 40% {\n transform: translate(-48%, -52%);\n }\n 50% {\n transform: translate(-50%, -48%);\n }\n 60% {\n transform: translate(-53%, -51%);\n }\n 70% {\n transform: translate(-47%, -49%);\n }\n 80% {\n transform: translate(-51%, -53%);\n }\n 90% {\n transform: translate(-49%, -47%);\n }\n}\n\n.icon-chaos {\n position: absolute;\n top: -10px;\n left: -10px;\n width: calc(100% + 20px);\n height: calc(100% + 20px);\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 5px;\n padding: 15px;\n background: repeating-linear-gradient(\n 0deg,\n #000 0px,\n #000 3px,\n #fff 3px,\n #fff 6px\n ),\n repeating-linear-gradient(90deg, #000 0px, #000 3px, #fff 3px, #fff 6px);\n border: 4px solid #000;\n transform: scale(0) rotate(180deg);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 15;\n box-shadow:\n 0 0 0 2px #00ffff,\n 0 0 0 4px #000,\n 0 0 0 6px #fff,\n 0 0 0 8px #000;\n}\n\n.icon-chaos::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-radial-gradient(\n circle at 50% 50%,\n #000 0px,\n #000 2px,\n #fff 2px,\n #fff 4px\n ),\n linear-gradient(45deg, transparent 40%, #00ffff 50%, transparent 60%);\n opacity: 0.3;\n animation: iconChaosPattern 4s linear infinite;\n}\n\n.social-unit {\n width: 100%;\n height: 100%;\n background: #fff;\n border: 2px solid #000;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transform: scale(0) rotate(360deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-shadow: inset 0 0 0 1px #00ffff;\n}\n\n.social-unit::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n transparent 0px,\n transparent 2px,\n #000 2px,\n #000 3px\n );\n opacity: 0.1;\n}\n\n.social-unit svg {\n width: 20px;\n height: 20px;\n fill: #000;\n transition: all 0.2s ease;\n filter: drop-shadow(1px 1px 0 #00ffff);\n}\n\n.noise-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent 0px,\n transparent 1px,\n rgba(0, 255, 255, 0.1) 1px,\n rgba(0, 255, 255, 0.1) 2px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent 0px,\n transparent 1px,\n rgba(0, 0, 0, 0.1) 1px,\n rgba(0, 0, 0, 0.1) 2px\n );\n pointer-events: none;\n z-index: 20;\n animation: noiseShift 1s linear infinite;\n}\n\n@keyframes noiseShift {\n 0% {\n transform: translateX(0) translateY(0);\n }\n 25% {\n transform: translateX(1px) translateY(-1px);\n }\n 50% {\n transform: translateX(-1px) translateY(1px);\n }\n 75% {\n transform: translateX(1px) translateY(1px);\n }\n 100% {\n transform: translateX(0) translateY(0);\n }\n}\n\n.chaos-terminal:hover .main-frame {\n transform: scale(0.9) rotate(5deg);\n opacity: 0.3;\n box-shadow:\n 0 0 0 2px #fff,\n 0 0 0 4px #000,\n 0 0 0 6px #fff,\n 0 0 0 8px #000,\n 20px 20px 0 8px #00ffff,\n 40px 40px 0 8px rgba(0, 0, 0, 0.4);\n}\n\n.chaos-terminal:hover .chaos-text {\n transform: translate(-50%, -50%) scale(0) rotate(720deg);\n opacity: 0;\n}\n\n.chaos-terminal:hover .icon-chaos {\n transform: scale(1) rotate(0deg);\n opacity: 100%;\n transition-delay: 0.2s;\n}\n\n.chaos-terminal:hover .social-unit:nth-child(1) {\n transform: scale(1) rotate(0deg);\n transition-delay: 0.1s;\n}\n\n.chaos-terminal:hover .social-unit:nth-child(2) {\n transform: scale(1) rotate(0deg);\n transition-delay: 0.1s;\n}\n\n.chaos-terminal:hover .social-unit:nth-child(3) {\n transform: scale(1) rotate(0deg);\n transition-delay: 0.1s;\n}\n\n.chaos-terminal:hover .social-unit:nth-child(4) {\n transform: scale(1) rotate(0deg);\n transition-delay: 0.1s;\n}\n\n.social-unit:hover {\n background: #00ffff;\n transform: scale(1.2) rotate(180deg) !important;\n box-shadow:\n inset 0 0 0 1px #000,\n 0 0 0 2px #fff,\n 0 0 0 4px #000,\n 0 0 20px #00ffff;\n}\n\n.social-unit:hover svg {\n fill: #000;\n transform: scale(1.2) rotate(-180deg);\n filter: drop-shadow(1px 1px 0 #fff);\n}\n\n/* Violent click */\n.chaos-terminal:active {\n animation: terminalDestroy 0.8s ease;\n}\n\n@keyframes terminalDestroy {\n 0% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(0.8) rotate(-5deg);\n filter: invert(1) hue-rotate(180deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}\n\n/* Scanlines */\n.chaos-terminal::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent 0px,\n transparent 2px,\n rgba(0, 255, 255, 0.205) 2px,\n rgba(0, 255, 255, 0.394) 4px\n );\n pointer-events: none;\n z-index: 25;\n animation: scanlines 1s linear infinite;\n}\n\n@keyframes scanlines {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(10px);\n }\n}\n"}

splendid-ape-42

👁 实时预览

📝 源代码