Skip to content

Instantly share code, notes, and snippets.

@tribela
Created May 22, 2021 08:39
Show Gist options
  • Save tribela/5afdd3287adec8d00374a5c3e0fc0ddf to your computer and use it in GitHub Desktop.
Save tribela/5afdd3287adec8d00374a5c3e0fc0ddf to your computer and use it in GitHub Desktop.
glitch.css
@keyframes glitch-anim-text {
0% {
transform: none;
clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%, 0 5vh, 100% 5vh, 100% 100%, 0 100%);
}
9%, 11% {
transform: scale(1, 1);
}
10% {
transform: scale(-1, 0);
}
49%, 51% {
transform: none;
}
50% {
transform: scale(-1, 1) translate(10px, 5px);
}
50.5% {
transform: translate(-10px, -5px);
}
69%, 71% {
filter: none;
}
70% {
filter: invert(100%);
}
80% {
filter: drop-shadow(-5px 0 rgba(255, 0, 255, .6)) drop-shadow(5px 0 rgba(0, 255, 255, .6));
}
100% {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 calc(100% - 5vh), 0 100%, 100% 100%, 100% 100%, 0 100%);
}
}
body {
display: flow-root;
margin: 1em;
min-height: calc(100vh - (2 * 1em));
color: #f314d2;
background: #0c0133;
animation: glitch-anim-text 5s infinite linear;
}
html {
position: relative;
min-height: 100%;
font-size: 20px;
}
html::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(background.jpg);
background-position: center center;
background-size: cover;
background-attachment: fixed;
opacity: 40%;
}
body > main {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment