Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Glitch Effect</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400'); | |
| body { | |
| display: flex; | |
| width: 100vw; | |
| height: 100vh; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0; | |
| background: #131313; | |
| color: #fff; | |
| font-size: 96px; | |
| font-family: 'Fira Mono', monospace; | |
| letter-spacing: -7px; | |
| } | |
| div { | |
| position: relative; | |
| animation: glitch 1s linear infinite; | |
| } | |
| @keyframes glitch { | |
| 2%, 64% { | |
| transform: translate(2px, 0) skew(0deg); | |
| } | |
| 4%, 60% { | |
| transform: translate(-2px, 0) skew(0deg); | |
| } | |
| 62% { | |
| transform: translate(0, 0) skew(5deg); | |
| } | |
| } | |
| div:before, | |
| div:after { | |
| content: attr(title); | |
| position: absolute; | |
| left: 0; | |
| } | |
| div:before { | |
| animation: glitchTop 1s linear infinite; | |
| clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); | |
| } | |
| @keyframes glitchTop { | |
| 2%, 64% { | |
| transform: translate(2px, -2px); | |
| } | |
| 4%, 60% { | |
| transform: translate(-2px, 2px); | |
| } | |
| 62% { | |
| transform: translate(13px, -1px) skew(-13deg); | |
| } | |
| } | |
| div:after { | |
| animation: glitchBottom 1.5s linear infinite; | |
| clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); | |
| -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); | |
| } | |
| @keyframes glitchBottom { | |
| 2%, 64% { | |
| transform: translate(-2px, 0); | |
| } | |
| 4%, 60% { | |
| transform: translate(-2px, 0); | |
| } | |
| 62% { | |
| transform: translate(-22px, 5px) skew(21deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div title="404">404</div> | |
| </body> | |
| </html> |