Guybrush Shovle

dabblet.css

/* * Guybrush Shovle 
 */
 
@keyframes shovle {
0% {background-position: -266px -1000px;}
25% {background-position: -346px -1000px;}
50% {background-position: -426px -1000px;}
75% {background-position: -506px -1000px;}
100% {background-position: -266px -1000px;}
}

@keyframes speech-out-1 {
0%, 100% {opacity:1;}
}

@keyframes speech-out-2 {0%, 100% {opacity:1;}}

.speechbubble:nth-of-type(1) {
animation: 3s speech-out-1 step-start 1 none;
animation-delay: 1s;
opacity: 0;
}

.speechbubble:nth-of-type(2) {animation: 3s speech-out-2 step-start 1 none;animation-delay: 4s;opacity: 0;}

.speechbubble {
background-color: black;
color: pink;
display: inline-block;
font-family: 'mono';
font-size: 1.3rem;
font-weight: 900;
padding: .8rem;
}

.guy {
animation: 1.5s shovle infinite;
animation-timing-function: step-start;
background-image: url('http://walen.se/sprites/images/sprites/monkey_island_2_-_lechuck\'s_revenge/guybrush.gif');
background-size: 588px 1902px;
background-repeat: no-repeat;
height: 100px;
width: 80px;
}

body {
background: url('http://fengzhudesign.com/blog/fzd_monkey_01b.JPG');
background-size: 100% auto;
background-repeat: no-repeat;
min-height: 100%;
padding: 10rem 0 0 10rem;
}

dabblet.html

<div class="speechbubble">There lays some hidden ascii there.</div>
<div class="speechbubble">I will take my mighty shovel.</div>
<div class="guy"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}