{"html":"

ERROR

\n","css":".tv-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.tv-screen {\n position: relative;\n width: 300px;\n height: 200px;\n background: black;\n border: 10px solid #333;\n border-radius: 10px;\n box-shadow:\n 0 0 20px rgba(0, 0, 0, 0.8),\n inset 0 0 50px rgba(255, 255, 255, 0.2);\n overflow: hidden;\n}\n\n.static {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n #000,\n #000 1px,\n #111 1px,\n #fff 1px,\n #333 2px\n );\n animation: flicker 0.1s steps(20) infinite;\n z-index: 1;\n}\n\n.error-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: red;\n font-size: 18px;\n font-weight: bold;\n letter-spacing: 2px;\n text-shadow: 2px 2px 5px black;\n z-index: 2;\n animation: glitch 0.5s infinite;\n}\n\n.tv-stand {\n width: 150px;\n height: 10px;\n background: #333;\n margin-top: 10px;\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);\n}\n\n@keyframes flicker {\n 0% {\n opacity: 0.8;\n transform: scaleY(1);\n }\n 50% {\n opacity: 1;\n transform: scaleY(1.01);\n }\n 100% {\n opacity: 0.7;\n transform: scaleY(0.99);\n }\n}\n\n@keyframes glitch {\n 0% {\n transform: translate(-50%, -50%) skewX(5deg);\n opacity: 0.9;\n }\n 25% {\n transform: translate(-50%, -50%) skewX(-5deg);\n opacity: 0.8;\n }\n 50% {\n transform: translate(-50%, -50%) skewX(0deg);\n opacity: 1;\n }\n 75% {\n transform: translate(-50%, -50%) skewX(-5deg);\n opacity: 0.8;\n }\n 100% {\n transform: translate(-50%, -50%) skewX(5deg);\n opacity: 0.9;\n }\n}\n"}

perfect-monkey-59

👁 实时预览

📝 源代码