| <!DOCTYPE html>
|
| <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> |
