{"html":"

\n The Eye of Providence\n

Always Watching

Obey. Trust. Consume

\n","css":".card {\n background-color: #222;\n border: 10px solid rgb(161, 156, 116);\n padding: 30px;\n width: 400px;\n text-align: center;\n position: relative;\n box-shadow: 9px 11px 1px rgb(0, 0, 0);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n overflow: hidden;\n z-index: 1;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(255, 255, 255, 0.05),\n rgba(255, 255, 255, 0.05) 1px,\n transparent 1px,\n transparent 2px\n );\n\n opacity: 0.3;\n pointer-events: none;\n z-index: 2;\n animation: tv-static 0.2s infinite linear alternate;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n linear-gradient(\n 90deg,\n rgba(255, 0, 0, 0.06),\n rgba(0, 255, 0, 0.02),\n rgba(0, 0, 255, 0.06)\n );\n background-size: 100% 2px, 3px 100%;\n animation: tv-flicker 0.15s infinite;\n z-index: 35;\n pointer-events: none;\n opacity: 0.5;\n}\n\n@keyframes tv-static {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 0.1;\n }\n}\n\n.eye-of-providence {\n position: relative;\n width: 220px;\n height: 220px;\n margin: 0 auto 20px;\n}\n\n.triangle {\n width: 0;\n height: 0;\n border-left: 110px solid transparent;\n border-right: 110px solid transparent;\n border-bottom: 190px solid rgb(198, 181, 113);\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n transition: transform 0.3s ease;\n}\n\n.card:hover .triangle {\n transform: scale(1.05);\n}\n\n.eye {\n width: 90px;\n height: 50px;\n background: radial-gradient(circle at 30% 30%, #fff, #e6e6e6);\n border-radius: 50%;\n position: absolute;\n top: 90px;\n left: 65px;\n overflow: hidden;\n box-shadow: 0 0 0 10px rgb(115, 112, 92), 15px 15px 0 #000,\n inset -5px -5px 10px rgba(0, 0, 0, 0.2),\n inset 5px 5px 10px rgba(255, 255, 255, 0.3);\n z-index: 2;\n animation: blink 6s infinite cubic-bezier(0.76, 0, 0.24, 1);\n}\n\n.pupil {\n width: 16px;\n height: 16px;\n background: rgb(207, 19, 19);\n border-radius: 50%;\n background: radial-gradient(circle at 50% 50%, #000, #444);\n border: 2px solid #fff;\n position: absolute;\n top: 14px;\n left: 14px;\n box-shadow: inset 0 0 10px rgba(203, 4, 4, 0.2), 0 0 10px rgba(0, 0, 0, 0.5);\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n height: 50px;\n }\n 92%,\n 98% {\n height: 0px;\n }\n}\n\n@keyframes blink {\n 0%,\n 92%,\n 100% {\n transform: scaleY(1);\n }\n 94% {\n transform: scaleY(0.1);\n }\n}\n\n.iris {\n width: 45px;\n height: 45px;\n background: #000;\n border-radius: 50%;\n position: absolute;\n top: 2px;\n left: 22px;\n animation: look-around 6s infinite;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes look-around {\n 0%,\n 100% {\n transform: translate(-2, 10px) scale(1);\n }\n 25% {\n transform: translate(-18px, 10px) scale(1.1);\n }\n 50% {\n transform: translate(0, 15px) scale(1.2);\n }\n 75% {\n transform: translate(20px, 10px) scale(1.1);\n }\n}\n\n.triangle-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 4px solid #f00;\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n animation: rotate 15s linear infinite;\n z-index: 0;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.title {\n color: rgb(255, 255, 255);\n margin-top: 30px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 28px;\n padding-bottom: 33px;\n text-shadow: 3px 3px #000;\n z-index: 3;\n position: relative;\n display: inline-block;\n}\n\n.title::before,\n.title::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.title::before {\n left: 2px;\n text-shadow: -1px 0 red;\n animation: glitch-anim-1 2s infinite linear alternate-reverse;\n}\n\n.title::after {\n left: -2px;\n text-shadow: -1px 0 blue;\n animation: glitch-anim-2 3s infinite linear alternate-reverse;\n}\n\n@keyframes glitch-anim-1 {\n 0% {\n clip: rect(30px, 9999px, 10px, 0);\n }\n 100% {\n clip: rect(42px, 9999px, 78px, 0);\n }\n}\n\n@keyframes glitch-anim-2 {\n 0% {\n top: -1px;\n left: 1px;\n clip: rect(65px, 9999px, 119px, 0);\n }\n 100% {\n top: 1px;\n left: -1px;\n clip: rect(79px, 9999px, 16px, 0);\n }\n}\n\n.glitch-text {\n color: #fff;\n font-size: 20px;\n margin-top: 20px;\n position: relative;\n display: inline-block;\n text-shadow: 2px 2px #000;\n z-index: 3;\n}\n\n.glitch-text {\n color: #fff;\n font-size: 20px;\n margin-top: 20px;\n position: relative;\n display: inline-block;\n text-shadow: 2px 2px #000;\n z-index: 3;\n}\n\n.glitch-text::before,\n.glitch-text::after {\n content: \"The Eye of Providence\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.glitch-text::before {\n left: 3px;\n text-shadow: -3px 0 #f00;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n.glitch-text::after {\n left: -3px;\n text-shadow: -3px 0 #0ff;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n@keyframes glitch-anim {\n 0% {\n clip: rect(34px, 9999px, 11px, 0);\n }\n 5% {\n clip: rect(92px, 9999px, 89px, 0);\n }\n 10% {\n clip: rect(6px, 9999px, 22px, 0);\n }\n 15% {\n clip: rect(75px, 9999px, 4px, 0);\n }\n 20% {\n clip: rect(6px, 9999px, 87px, 0);\n }\n 25% {\n clip: rect(45px, 9999px, 98px, 0);\n }\n 30% {\n clip: rect(39px, 9999px, 57px, 0);\n }\n 35% {\n clip: rect(90px, 9999px, 65px, 0);\n }\n 40% {\n clip: rect(7px, 9999px, 90px, 0);\n }\n 45% {\n clip: rect(30px, 9999px, 88px, 0);\n }\n 50% {\n clip: rect(76px, 9999px, 23px, 0);\n }\n 55% {\n clip: rect(57px, 9999px, 35px, 0);\n }\n 60% {\n clip: rect(85px, 9999px, 87px, 0);\n }\n 65% {\n clip: rect(54px, 9999px, 12px, 0);\n }\n 70% {\n clip: rect(32px, 9999px, 56px, 0);\n }\n 75% {\n clip: rect(36px, 9999px, 98px, 0);\n }\n 80% {\n clip: rect(12px, 9999px, 43px, 0);\n }\n 85% {\n clip: rect(54px, 9999px, 76px, 0);\n }\n 90% {\n clip: rect(43px, 9999px, 23px, 0);\n }\n 95% {\n clip: rect(76px, 9999px, 87px, 0);\n }\n}\n\n.scan-line {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 6px;\n background: rgba(75, 68, 68, 0.5);\n animation: scan 2.5s linear infinite;\n z-index: 4;\n}\n\n@keyframes scan {\n 0% {\n top: 0;\n }\n 100% {\n top: 100%;\n }\n}\n\n.triangle-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 4px solid #f00;\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n animation: rotate 15s linear infinite;\n z-index: 0;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.title {\n color: rgb(255, 255, 255);\n margin-top: 30px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 28px;\n text-shadow: 3px 3px #000;\n z-index: 3;\n}\n\n.glitch-text {\n color: #fff;\n font-size: 20px;\n margin-top: 20px;\n position: relative;\n display: inline-block;\n text-shadow: 2px 2px #000;\n z-index: 3;\n}\n\n.glitch-text::before,\n.glitch-text::after {\n content: \"The Eye of Providence\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.glitch-text::before {\n left: 3px;\n text-shadow: -3px 0 #f00;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n.glitch-text::after {\n left: -3px;\n text-shadow: -3px 0 #0ff;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n@keyframes glitch-anim {\n 0% {\n clip: rect(34px, 9999px, 11px, 0);\n }\n 5% {\n clip: rect(92px, 9999px, 89px, 0);\n }\n 10% {\n clip: rect(6px, 9999px, 22px, 0);\n }\n 15% {\n clip: rect(75px, 9999px, 4px, 0);\n }\n 20% {\n clip: rect(6px, 9999px, 87px, 0);\n }\n 25% {\n clip: rect(45px, 9999px, 98px, 0);\n }\n 30% {\n clip: rect(39px, 9999px, 57px, 0);\n }\n 35% {\n clip: rect(90px, 9999px, 65px, 0);\n }\n 40% {\n clip: rect(7px, 9999px, 90px, 0);\n }\n 45% {\n clip: rect(30px, 9999px, 88px, 0);\n }\n 50% {\n clip: rect(76px, 9999px, 23px, 0);\n }\n 55% {\n clip: rect(57px, 9999px, 35px, 0);\n }\n 60% {\n clip: rect(85px, 9999px, 87px, 0);\n }\n 65% {\n clip: rect(54px, 9999px, 12px, 0);\n }\n 70% {\n clip: rect(32px, 9999px, 56px, 0);\n }\n 75% {\n clip: rect(36px, 9999px, 98px, 0);\n }\n 80% {\n clip: rect(12px, 9999px, 43px, 0);\n }\n 85% {\n clip: rect(54px, 9999px, 76px, 0);\n }\n 90% {\n clip: rect(43px, 9999px, 23px, 0);\n }\n 95% {\n clip: rect(76px, 9999px, 87px, 0);\n }\n}\n\n.scan-line {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 6px;\n background: rgba(75, 68, 68, 0.5);\n animation: scan 2.5s linear infinite;\n z-index: 4;\n}\n\n@keyframes scan {\n 0% {\n top: 0;\n }\n 100% {\n top: 100%;\n }\n}\n\n.triangle-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 4px solid #f00;\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n animation: rotate 15s linear infinite;\n z-index: 0;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.title {\n color: rgb(255, 255, 255);\n margin-top: 30px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 28px;\n text-shadow: 3px 3px #000;\n z-index: 3;\n}\n\n.glitch-text {\n color: #fff;\n font-size: 20px;\n margin-top: 20px;\n position: relative;\n display: inline-block;\n text-shadow: 2px 2px #000;\n z-index: 3;\n}\n\n.glitch-text::before,\n.glitch-text::after {\n content: \"Always Watching\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.glitch-text::before {\n left: 3px;\n text-shadow: -3px 0 #f00;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n.glitch-text::after {\n left: -3px;\n text-shadow: -3px 0 #0ff;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 3s infinite linear alternate-reverse;\n}\n\n.footer-text {\n color: #fff;\n font-size: 14px;\n margin-top: 20px;\n text-transform: uppercase;\n letter-spacing: 1px;\n opacity: 0.7;\n position: relative;\n z-index: 3;\n}\n\n.footer-text::before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 50%;\n width: 50px;\n height: 1px;\n background-color: rgba(255, 255, 255, 0.3);\n transform: translateX(-50%);\n}\n"}

cold-tiger-22

👁 实时预览

📝 源代码