danielmascena/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
:root {
--xis: calc(100% - 60%);
}
#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	animation: rolling-position 10s infinite linear;
}
#fundo:before {
	content: "";
	position: fixed;
	display: block;
	left: var(--xis);
	background: green;
	top: 110px;
	width: 10px;
	height: 10px;
	box-shadow: 0px 10px,
		10px 10px blue;
}
#fundo:hover:before{
	left: 220px;
	transition: left 4s linear;
}
#cubo {
	width: 20px;
	height: 20px;
	background: red;
	position: fixed;
	left: 200px;
	top: 100px;
}
@keyframes rolling-position {
	to {
		background-position: -1800px center;
	}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<section id="fundo">
<div id="cubo"></div>
</section>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/
	:root {
	--xis: calc(100% - 60%);
	}
	#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	animation: rolling-position 10s infinite linear;
	}
	#fundo:before {
	content: "";
	position: fixed;
	display: block;
	left: var(--xis);
	background: green;
	top: 110px;
	width: 10px;
	height: 10px;
	box-shadow: 0px 10px,
	10px 10px blue;
	}
	#fundo:hover:before{
	left: 220px;
	transition: left 4s linear;
	}
	#cubo {
	width: 20px;
	height: 20px;
	background: red;
	position: fixed;
	left: 200px;
	top: 100px;
	}
	@keyframes rolling-position {
	to {
	background-position: -1800px center;
	}
	}
	<!-- content to be placed inside <body>…</body> -->

	<section id="fundo">
	<div id="cubo"></div>
	</section>