Untitled

dabblet.css

@keyframes parade{
0% {
}
50% {
left: -100px;
transform: rotate(-50deg);
}
75% {
}
100% {
left: 100px;
transform: rotate(50deg);
}
}
#torwart {
position: relative;
top: -20.5em;
left: 13.5em;
height: 1px;
}
#torwart > img {
position: relative;
height: 14em;
}
#torwart > img:hover {
animation: parade 1s infinite linear;
}
#ball {
border-radius: 50%;
height: 40px;
width: 40px;
border: 1px solid black;
display: inline-block;
position: relative;
background-color: white;
top: -4.5em;
left: 25.5em;
box-shadow: black 3px 3px 5px;
}
#shooter {
position: relative;
left: 23em;
top: -16em;
height: 1px;
}
#shooter > img {
height: 220px;
opacity: 0.7;
z-index: 3;
transition: opacity 400ms linear;
}
#shooter > img:hover {
opacity: 1;
}

dabblet.html

<div id="tor">
	<div id="net"><img src="http://fussball.exsudo.de/fussballtor.jpg"></div>
	<div id="torwart"><img src="http://www.freggers.de/img/big/325566/7_carrywalk_1/fregger.png?i=1488;i=389;i=574"></div>
</div>
<div id="spieler">
	<div id="ball"></div>
	<div id="shooter"><img src="http://www.freggers.de/img/big/325566/3_kick_1/fregger.png?i=1490;i=389;i=574"></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"html"}