<div class="centerer">
<img class="porthole" src="https://media.giphy.com/media/3o85xJhackBStfkdBC/giphy.gif" />
</div>
<div class="centerer">
<p class="text one">Be everything and nothing</p>
</div>
<div class="centerer">
<p class="text two">Be everything and nothing</p>
</div>
@import url(//fontlibrary.org/face/effects-eighty);
$font: 'EffectsEighty';
* {
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
html, body {
height: 100%;
background-color: lighten(#090D19, 20%);
background-image: url(https://media.giphy.com/media/JqiYS6Xvdh0IM/giphy.gif);
background-size: cover;
background-position: 50% 40%;
}
body {
mix-blend-mode: screen;
}
.centerer {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.porthole {
width: 30vw;
height: auto;
mix-blend-mode: multiply;
}
.text {
font-size: 4vw;
font-family: $font;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1vw;
color: transparent;
width: 100%;
text-align: center;
mix-blend-mode: screen;
}
.one {
text-shadow: 0 0.1vw 0.05vw #6858F2;
}
.two {
text-shadow: 0 0 0.1vw #FFFFFF;
animation: text-2 0.5s infinite;
}
@keyframes text-2 {
0% {
transform: scale(1) translate(0, 0) skew(0deg);
}
7% {
transform: scale(1) translate(0, 0) skew(0deg);
}
8% {
transform: scale(1.2) translate(-20px, 30px) skew(0deg);
}
11% {
transform: scale(1.2) translate(-20px, 30px) skew(0deg);
}
12% {
transform: scale(0) translate(0,0) skew(0deg);
}
29% {
transform: skew(-50deg);
}
32% {
transform: skew(0deg);
}
41% {
transform: skew(0deg);
}
67% {
transform: scale(1) translate(0, 0) skew(0deg);
}
68% {
transform: scale(1.2) translate(50px, 35px) skew(0deg);
}
71% {
transform: scale(1.2) translate(50px, 35px) skew(0deg);
}
72% {
transform: scale(0) translate(0,0) skew(0deg);
}
100% {
transform: skew(0deg);
}
}
View Compiled
// UPDATE 2017: The newest versions of modern browsers have fixed the bug I originally exploited to make this pen, so it no longer works as it originally did. Switch to Details view for a link to a GIF of the original effect I posted on Twitter.
// ----------------------------------- //
// - WARNING: FLASHING SATURATED RED HUES
// - So I discovered that mix-blend-mode on the <body> element makes browsers flip out and creates a cool glitchy effect.
// - I combined this with vaporwave GIFs from Giphy and CSS transforms on the text for a glitchier effect.
// - Probably won't render correctly in IE/Edge
// - View in both Firefox and Chrome: each have a different rendering glitch!
// - Try resizing the window quickly to see different glitch variations.
// - Resizing rapidly may crash your browser. You have been warned!
// - Also, check out the iframe of this pen on my Codepen profile showcase--on my device, Chrome attempts to blend in elements from other iframes on the same page (!!!).
This Pen doesn't use any external CSS resources.