Disco fever

dabblet.css

/**
 * Disco fever
 */

body{
	height: 100%;
	background-color: black;
	perspective: 700px;
}

#dancefloor{
	margin: 40px auto 0;
	width: 600px;
	height: 600px;
	background-color: black;
	background-image: linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%, #e9e9e9), linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%, #e9e9e9);
	background-size: 80px 80px;
	background-position: 0 0, 40px 40px;
	box-shadow: 0 0 30px 7px purple;
	transform: translate3d(0,0,0) rotateX(30deg);
	-webkit-filter: blur(1px);
}

.light{
	position: absolute;
	z-index: 20;
	height: 780px;
	width: 480px;
	-webkit-filter: blur(5px);
	background-image: radial-gradient(ellipse farthest-side at 50% 30%, purple 0%, transparent 100%);
}
#light1{
	top: -200px;
	left: 0;
	transform: rotateX(-35deg) rotateZ(-35deg);
}
#light2{
	top: -200px;
	right: 0;
	transform: rotateX(-35deg) rotateZ(35deg);
}
#light3{
	bottom: -200px;
	left: 0;
	transform: rotateX(-125deg) rotateZ(-35deg);
}
#light4{
	bottom: -200px;
	right: 0;
	transform: rotateX(-125deg) rotateZ(35deg);
}


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

@keyframes dancerHead{
	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); }
}
#dancer>.head{
	z-index: 2;
	top: 2px;
	left: 48px;
	width: 42px;
	height: 50px;
	background-color: #f2c19d;
	animation: dancerHead 1s linear infinite;
}
#dancer>.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 21px;
	border-top-right-radius: 30px 21px;
}
#dancer>.head::after{
	content: '';
	display: block;
	position: absolute;
	z-index: 3;
	bottom: -1px;
	left: 18px;
	right: 18px;
	height: 6px;
	background-color: #000;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

@keyframes dancerBody{
	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); }
}
#dancer>.body{
	z-index: 0;
	top: 40px;
	left: 35px;
	width: 68px;
	height: 130px;
	animation: dancerBody 1s linear infinite;
}
#dancer>.body>.tie{
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-top: 40px solid #f2c19d;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
}
#dancer>.body>.tie::before{
	content: '';
	display: block;
	position: absolute;
	top: -36px;
	left: -16px;
	width: 0;
	height: 0;
	border-top: 40px solid #fff;
	border-left: 12px solid transparent;
	border-right: 1px solid transparent;
	transform: rotate(-15deg);
}
#dancer>.body>.tie::after{
	content: '';
	display: block;
	position: absolute;
	top: -36px;
	right: -16px;
	width: 0;
	height: 0;
	border-top: 40px solid #fff;
	border-right: 12px solid transparent;
	border-left: 1px solid transparent;
	transform: rotate(17deg);
}

@keyframes dancerLeftUpperArm{
	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); }
}
#dancer>.left-upper-arm{
	z-index: 3;
	top: 45px;
	left: 15px;
	width: 22px;
	height: 60px;
	transform: rotate(42deg);
	animation: dancerLeftUpperArm 1s linear infinite;
}
@keyframes dancerLeftLowerArm{
	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); }
}
#dancer>.left-lower-arm{
	z-index: 4;
	top: 71px;
	left: 23px;
	width: 20px;
	height: 65px;
	transform: rotate(-65deg);
	animation: dancerLeftLowerArm 1s linear infinite;
}
@keyframes dancerLeftHand{
	0%{ transform: none; }
	25%{ transform: translate(5px, -23px); }
	50%{ transform: none; }
	75%{ transform: translate(8px, -23px); }
	100%{ transform: none; }
}
#dancer>.left-hand{
	z-index: 5;
	top: 108px;
	left: 57px;
	width: 20px;
	height: 20px;
	background-color: #f2c19d;
	animation: dancerLeftHand 1s linear infinite;
}

@keyframes dancerRightUpperArm{
	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); }
}
#dancer>.right-upper-arm{
	z-index: 3;
	top: 45px;
	right: 15px;
	width: 22px;
	height: 60px;
	transform: rotate(-42deg);
	animation: dancerRightUpperArm 1s linear infinite;
}
@keyframes dancerRightLowerArm{
	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); }
}
#dancer>.right-lower-arm{ 
	z-index: 4;
	top: 71px;
	right: 23px;
	width: 20px;
	height: 65px;
	transform: rotate(65deg);
	animation: dancerRightLowerArm 1s linear infinite;
}
@keyframes dancerRightHand{
	0%{ transform: none; }
	25%{ transform: translate(-5px, -23px); }
	50%{ transform: none; }
	75%{ transform: translate(-8px, -23px); }
	100%{ transform: none; }
}
#dancer>.right-hand{
	z-index: 5;
	top: 108px;
	right: 57px;
	width: 20px;
	height: 20px;
	background-color: #f2c19d;
	animation: dancerRightHand 1s linear infinite;
}


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

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

dabblet.html

<div id="dancefloor">
	<div id="light1" class="light"></div>
	<div id="light2" class="light"></div>
	<div id="light3" class="light"></div>
	<div id="light4" class="light"></div>
</div>

<div id="dancer">
	<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>

dabblet.js

// alert('Hello world!');

settings.json

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