<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 (!!!).

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js