Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
P R E S S E D
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
<body>
<main>
<div class="marker"></div>
<h1>P</h1>
<h1 class="r">R</h1>
<h1 class="e1">E</h1>
<h1 class="s1">S</h1>
<h1 class="s2">S</h1>
<h1 class="e2">E</h1>
<h1>D</h1>
</main>
</body>
html { font-size: 1px; }
body {
margin: 0;
font-family: 'Work Sans', sans-serif;
font-size: 30rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6)), url(http://alluretouch.com/wp-content/uploads/2015/09/minimalist-art.jpg);
background-position: 50% 15%;
background-size: cover;
}
main {
position: relative;
display: flex;
}
h1 { margin: 0; }
.marker, .r, .e1, .s1, .s2, .e2 {
animation-timing-function: cubic-bezier(0.15,-0.01, 0.58, 1);
animation-duration: 5s;
animation-iteration-count: infinite;
will-change: transform;
}
.marker {
position: absolute; top: 4rem; left: -3rem;
height: 3rem; width: 40rem;
background-color: black;
animation-name: marker;
}
.r { margin-left: 1rem; animation-name: r; }
.e1 { margin-left: 7rem; animation-name: e1; }
.s1 { margin-left: 16rem; animation-name: s1; }
.s2 { margin-left: 21rem; animation-name: s2; }
.e2 { margin: 0 36rem 0 42rem; animation-name: e2; }
@keyframes r {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(35rem); }
}
@keyframes e1 {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(75rem); }
}
@keyframes s1 {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(81rem); }
}
@keyframes s2 {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(71rem); }
}
@keyframes e2 {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(34rem); }
}
@keyframes marker {
0%, 20% { transform: translateX(0); }
50%, 70% { transform: translateX(337rem); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment