DingDong

dabblet.css

/**
 * DingDong
 */

body {text-align:center;background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/az_subtle.png')}
a {display:block;}
.container {margin:100px auto 20px auto;height: 600px;width:300px;}


.sol {
	width:79px;
	height:79px;
	background:url('http://f.cl.ly/items/3G341b3o3G2b0d2X1b2i/sol.png') no-repeat;
}

.nota {position: relative;z-index:3;}

#palo {
	position: relative;
	z-index: 1;
	width: 66px;
	height: 38px;
	background: url('http://f.cl.ly/items/0w0H0c3x3V0l3T173E3p/palo.png') no-repeat;
	top: -23px;
	left: 25px;
	}
	
#palo:target {-webkit-animation: sona .1s ease-in-out;}
	
@-webkit-keyframes sona {

	0% {
		-webkit-transform: scale(1) rotate(0deg);
		-webkit-animation-timing-function: ease-out;


	}
	25% {
		-webkit-transform: scale(0.95) rotate(-20deg)  ;
		-webkit-animation-timing-function: ease-in;

	}

}

dabblet.html

	
	<div class="container">
		<a href="#palo" class="nota sol"></a>
		<div id="palo"></div>

	</div>

settings.json

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