Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ryaninhust/101220838c254959b503 to your computer and use it in GitHub Desktop.
Save ryaninhust/101220838c254959b503 to your computer and use it in GitHub Desktop.
A Pen by ryaninhust.
<img src="http://www.jiongyaya.com/uploads/allimg/130604/1-130604094933.png" alt="toast">
<div class="dialog">
<div>AND SO TOAST FLEW OFF</div>
<div>INTO THE STARS. FOREVER.</div>
<div>HE NEVER CAME BACK...</div>
</div>
body {
margin: 0;
background-color: #4b6473;
background-image:
url(http://codersblock.com/assets/stars1.png),
url(http://codersblock.com/assets/stars2.png),
url(http://codersblock.com/assets/stars3.png);
animation:
stars 32s linear infinite,
fade 10s steps(5) 16s forwards;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -64px;
animation: toast 4s ease infinite;
}
.dialog {
position: absolute;
top: 50%;
left: 50%;
margin: 24px 0 0 -300px;
width: 552px;
padding: 12px;
background-color: #fff;
border: solid 12px #000;
font: bold 22px/36px "Press Start 2P", monospace;
}
.dialog div {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: dialog 5s steps(24) forwards;
}
.dialog div:nth-child(1) {
animation-delay: 0s;
}
.dialog div:nth-child(2) {
animation-delay: 6s;
}
.dialog div:nth-child(3) {
animation-delay: 12s;
}
@keyframes toast {
50% { transform: translateY(20px); }
100% { transform: translateY(0px); }
}
@keyframes dialog {
100% { width: 100%; }
}
@keyframes stars {
100% { background-position:
-2048px 512px,
-4096px 512px,
-8192px 512px; }
}
@keyframes fade {
100% { background-color: #1d272d; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment