Gangnam Style

dabblet.css

/* Gangnam Style */

html{
	min-height: 100%;
	background-color: #270a52;
	background-size: contain;
	background-image: radial-gradient(circle closest-side, #5632b8 0%, #270a52 100%);
	background-repeat: no-repeat;
}
html::before, html::after{
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	top: -200px;
	height: 530px;
	width: 200px;
	filter: blur(5px);
	background-image: radial-gradient(ellipse farthest-side at 50% 30%, #681adb 0%, transparent 100%);
}
html::before{
	left: 50%;
	margin-left: -320px;
	transform: rotate(-35deg);
}
html::after{
	right: 50%;
	margin-right: -320px;
	transform: rotate(35deg);
}

#gangnam{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140px;
	height: 275px;
	margin-top: -137px;
	margin-left: -70px;
}
#gangnam>div{
	position: absolute;
	border-radius: 1.5em;
	background-color: black;
	/*background-color: rgba(0,0,0,.5);*/
}

@keyframes gangnamHead{
	0%{ transform: translate(0, 1px); }
	25%{ transform: translate(3px, -2px); }
	50%{ transform: translate(0, 1px); }
	75%{ transform: translate(-3px, -2px); }
	100%{ transform: translate(0, 1px); }
}
#gangnam>.head{
	z-index: 2;
	top: 2px;
	left: 48px;
	width: 42px;
	height: 50px;
	background-color: #f2c19d;
	animation: gangnamHead 1s linear infinite;
}
#gangnam>.head::before{
	content: '';
	display: block;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 3px;
	right: 3px;
	height: 12px;
	background-color: #000;
	border-top-left-radius: 30px 20px;
	border-top-right-radius: 30px 20px;
}

@keyframes gangnamBody{
	0%{ transform: translate(0, 0) rotate(0deg); }
	25%{ transform: translate(0, -3px) rotate(-3deg); }
	50%{ transform: translate(0, 0) rotate(0deg); }
	75%{ transform: translate(0, -3px) rotate(3deg); }
	100%{ transform: translate(0, 0) rotate(0deg); }
}
#gangnam>.body{
	z-index: 0;
	top: 40px;
	left: 30px;
	width: 80px;
	height: 130px;
	animation: gangnamBody 1s linear infinite;
}
#gangnam>.body>.tie{
	position: relative;
	z-index: 1;
	margin: 10px auto 0;
	width: 8px;
	height: 50px;
	background-color: #fff;
}
#gangnam>.body>.tie::before{
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	height: 12px;
	border-radius: 2em;
	background-color: #fff;
}
#gangnam>.body>.tie::after{
	content: '';
	display: block;
	position: absolute;
	top: 50px;
	height: 0;
	border: 4px solid transparent;
	border-top-color: #fff;
}

@keyframes gangnamLeftUpperArm{
	0%{ transform: rotate(42deg); }
	25%{ transform: translate(0, -5px) rotate(45deg); }
	50%{ transform: rotate(42deg); }
	75%{ transform: translate(3px, -5px) rotate(45deg); }
	100%{ transform: rotate(42deg); }
}
#gangnam>.left-upper-arm{
	z-index: 3;
	top: 45px;
	left: 15px;
	width: 25px;
	height: 60px;
	transform: rotate(42deg);
	animation: gangnamLeftUpperArm 1s linear infinite;
}
@keyframes gangnamLeftLowerArm{
	0%{ transform: rotate(-65deg); }
	25%{ transform: translate(1px, -14px) rotate(-80deg); }
	50%{ transform: rotate(-65deg); }
	75%{ transform: translate(4px, -14px) rotate(-80deg); }
	100%{ transform: rotate(-65deg); }
}
#gangnam>.left-lower-arm{
	z-index: 4;
	top: 71px;
	left: 23px;
	width: 21px;
	height: 65px;
	transform: rotate(-65deg);
	animation: gangnamLeftLowerArm 1s linear infinite;
}
@keyframes gangnamLeftHand{
	0%{ transform: none; }
	25%{ transform: translate(5px, -23px); }
	50%{ transform: none; }
	75%{ transform: translate(8px, -23px); }
	100%{ transform: none; }
}
#gangnam>.left-hand{
	z-index: 5;
	top: 108px;
	left: 57px;
	width: 20px;
	height: 20px;
	background-color: #f2c19d;
	animation: gangnamLeftHand 1s linear infinite;
}

@keyframes gangnamRightUpperArm{
	0%{ transform: rotate(-42deg); }
	25%{ transform: translate(-3px, -5px) rotate(-45deg); }
	50%{ transform: rotate(-42deg); }
	75%{ transform: translate(0, -5px) rotate(-45deg); }
	100%{ transform: rotate(-42deg); }
}
#gangnam>.right-upper-arm{
	z-index: 3;
	top: 45px;
	right: 15px;
	width: 25px;
	height: 60px;
	transform: rotate(-42deg);
	animation: gangnamRightUpperArm 1s linear infinite;
}
@keyframes gangnamRightLowerArm{
	0%{ transform: rotate(65deg); }
	25%{ transform: translate(-1px, -14px) rotate(80deg); }
	50%{ transform: rotate(65deg); }
	75%{ transform: translate(-4px, -14px) rotate(80deg); }
	100%{ transform: rotate(65deg); }
}
#gangnam>.right-lower-arm{
	z-index: 4;
	top: 71px;
	right: 23px;
	width: 21px;
	height: 65px;
	transform: rotate(65deg);
	animation: gangnamRightLowerArm 1s linear infinite;
}
@keyframes gangnamRightHand{
	0%{ transform: none; }
	25%{ transform: translate(-5px, -23px); }
	50%{ transform: none; }
	75%{ transform: translate(-8px, -23px); }
	100%{ transform: none; }
}
#gangnam>.right-hand{
	z-index: 5;
	top: 108px;
	right: 57px;
	width: 20px;
	height: 20px;
	background-color: #f2c19d;
	animation: gangnamRightHand 1s linear infinite;
}


@keyframes gangnamLeftUpperLeg{
	50%{ transform: rotate(35deg); }
	75%{ transform: translate(-5px, -23px) rotate(80deg); }
	100%{ transform: rotate(35deg); }
}
#gangnam>.left-upper-leg{
	z-index: 3;
	top: 150px;
	left: 25px;
	width: 30px;
	height: 65px;
	transform: rotate(35deg);
	animation: gangnamLeftUpperLeg 1s linear infinite;
}
@keyframes gangnamLeftLowerLeg{
	50%{ transform: rotate(5deg); }
	75%{ transform: translate(-13px, -28px) rotate(0deg); }
	100%{ transform: rotate(5deg); }
}
#gangnam>.left-lower-leg{
	z-index: 4;
	top: 195px;
	left: 10px;
	width: 25px;
	height: 60px;
	transform: rotate(5deg);
	animation: gangnamLeftLowerLeg 1s linear infinite;
}
@keyframes gangnamLeftFoot{
	50%{ transform: none; }
	75%{ transform: translate(-13px, -28px); }
	100%{ transform: none; }
}
#gangnam>.left-foot{
	z-index: 5;
	top: 250px;
	left: 0;
	width: 35px;
	height: 25px;
	background-color: #000;
	animation: gangnamLeftFoot 1s linear infinite;
}

@keyframes gangnamRightUpperLeg{
	0%{ transform: rotate(-35deg); }
	25%{ transform: translate(5px, -23px) rotate(-80deg); }
	50%{ transform: rotate(-35deg); }
}
#gangnam>.right-upper-leg{
	z-index: 3;
	top: 150px;
	right: 25px;
	width: 30px;
	height: 65px;
	transform: rotate(-35deg);
	animation: gangnamRightUpperLeg 1s linear infinite;
}
@keyframes gangnamRightLowerLeg{
	0%{ transform: rotate(-5deg); }
	25%{ transform: translate(13px, -28px) rotate(0deg); }
	50%{ transform: rotate(-5deg); }
}
#gangnam>.right-lower-leg{
	z-index: 4;
	top: 195px;
	right: 10px;
	width: 25px;
	height: 60px;
	transform: rotate(-5deg);
	animation: gangnamRightLowerLeg 1s linear infinite;
}
@keyframes gangnamRightFoot{
	25%{ transform: translate(13px, -28px); }
	50%{ transform: none; }
}
#gangnam>.right-foot{
	z-index: 5;
	top: 250px;
	right: 0;
	width: 35px;
	height: 25px;
	background-color: #000;
	animation: gangnamRightFoot 1s linear infinite;
}

#ytplayer{
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: .3;
}

dabblet.html

<div id="gangnam">
	<div class="head"></div>
	
	<div class="left-upper-arm"></div>
	<div class="left-lower-arm"></div>
	<div class="left-hand"></div>
	
	<div class="right-upper-arm"></div>
	<div class="right-lower-arm"></div>
	<div class="right-hand"></div>
	
	<div class="body">
		<div class="tie"></div>
	</div>
	
	<div class="left-upper-leg"></div>
	<div class="left-lower-leg"></div>
	<div class="left-foot"></div>
	
	<div class="right-upper-leg"></div>
	<div class="right-lower-leg"></div>
	<div class="right-foot"></div>
</div>

<iframe id="ytplayer" type="text/html" width="160" height="90"
src="https://www.youtube.com/embed/9bZkp7q19f0?autoplay=1&controls=0&loop=1&modestbranding=1&showinfo=0"
frameborder="0" allowfullscreen>

dabblet.js

// alert('Hello world!');

settings.json

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