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