Skip to content

Instantly share code, notes, and snippets.

@ryaninhust

ryaninhust/Super-Toast-Story:-Final-Scene.markdown

Created June 15, 2014 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryaninhust/7ecc65e81c2b0a5dfd0f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryaninhust/7ecc65e81c2b0a5dfd0f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryaninhust created this gist Jun 15, 2014.
    9 changes: 9 additions & 0 deletions Super-Toast-Story:-Final-Scene.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Super Toast Story: Final Scene
    ------------------------------
    A short 16-bit story scene animated purely with CSS3.

    Forked from [Will Boyd](/lonekorean)'s Pen [Super Toast Story: Final Scene](/lonekorean/pen/CLoaB/).

    A [Pen](http://codepen.io/ryaninhust/pen/gCuLa) by [ryaninhust](http://codepen.io/ryaninhust) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/ryaninhust/pen/gCuLa/license).
    6 changes: 6 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <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>
    61 changes: 61 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    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; }
    }