Dancing Cactus by

Stela

On: 1 Aug 2016

fullscreen 
<div class="cactus-cont">
	<div class="body-top">
		<div class="eye left"></div>
		<div class="eye right"></div>	
		<div class="mouth"></div>
		<div class="hat"></div>
	</div>
	<div class="body-bottom"></div>
	<div class="shadow"></div>
	<div class="arm left">
		<div class="biceps"></div>
		<div class="forearm"></div>
	</div>
	<div class="arm right">
		<div class="biceps"></div>
		<div class="forearm"></div>
	</div>
</div>

/* colours */
/* http://www.colourlovers.com/palette/1610418/Death_By_Cactus */
@green4: #548C51;
@green2: #88E38A;
@green1: #74F566;
@purple: #48283A;

@almost-white: #FDFFCF;
@yellow: #FACF4D;

@sombrero1: #F2D285;
@sombrero2: #E1B36D;

/* mixins */
.box(@padding: 0) {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: @padding;
}
.size(@height: 0; @width: 0) {
	height: @height;
	width: @width;
}
.min-size(@height: 0; @width: 0) {
	min-height: @height;
	min-width: @width;
}
.abs(@top; @left) {
	position: absolute;
	top: @top;
	left: @left;
}
.animation(@prop) {
	-webkit-animation: @prop;
	-moz-animation: @prop;
	-o-animation: @prop;
	animation: @prop;
}

/* cactus */
.cactus-cont {
	.box(100px 50px);
	margin: 0 auto;
	.body-top {
		.animation(bodytop 0.7s infinite alternate ease-out);
		.box(0);
		.size(220px; 60px);
		background: radial-gradient(@green1, @green2);
		border-radius: 60px 60px 0 0;
		margin: 0 auto;
		position: relative;
		.eye {
			.size(8px; 8px;);
			border-radius: 50%;
			background: @green4;
			&.left {
				.abs(50px; 10px);
				.animation(wink 2s infinite ease-in);
			}
			&.right {
				.abs(50px; 42px);
			}
		}
		.mouth {
			.abs(60px; 20px);
			.box;
			.size(10px; 20px);
			border: 2px solid @green4;
			border-radius: 0 0 20px 20px;
		}
		.hat {
			.abs(-50px; 0);
			.size(80px; 60px);
			background: radial-gradient(@sombrero1, @sombrero2);
			border-radius: 50% 50% 0 0;
			&:before {
				.size(10px; 60px);
				.abs(70px; 0);
				background: linear-gradient( to left, #FF4D4D, @green2, #FF4D4D, @green2, #FF4D4D, @green2);
				content: "";
				display: block;
			}
			&:after {
				.size(10px; 180px);
				.abs(80px; -60px);
				background: darken(@sombrero2, 5%);
				border-radius: 0 0 50% 50%;
				border-bottom: 5px solid darken(@sombrero2, 15%);
				content: "";
				display: block;
			}
		}
	}
	.body-bottom {
		.animation(bodybottom 0.7s infinite alternate ease-out);
		.size(140px; 60px);
		background: radial-gradient(@green1, @green2);
		margin: -10px auto 0 auto;
	}
	.shadow {
		.abs(435px; ~"calc(50% - 50px)");
		.size(30px, 100px);
		background: @sombrero2;
		border-radius: 50%;
		z-index: -1;
	}
	.arm {
		.size(160px; 100px);
		.biceps {
			.abs(~"calc(100% - 34px)"; 0);
			.size(34px; 70px);
			background: radial-gradient(@green1, @green2);
		}
		.forearm {
			.animation(arm 1.5s infinite ease-out);
			background: radial-gradient(@green1, @green2);
			border-radius: 50px;
			transform-origin: bottom;
		}
		&.left {
			.abs(130px; ~"calc(50% - 100px)";);
			-webkit-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
			transform: rotate(-5deg);
			.biceps {
				border-radius: 50px 0 0 50px;               
			}
			.forearm {
				.abs(~"calc(50% - 35px)"; -10px);               
				.size(115px; 34px;);
			}   
		}
		&.right {
			.abs(100px; ~"calc(50% + 20px)";);
			-webkit-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
			transform: rotate(-5deg);
			.biceps {
				border-radius: 0 50px 50px 0;
			}
			.forearm {
				.abs(~"calc(50% - 20px)"; 40px);
				.animation(arm 1.2s 0.2s infinite ease-out);
				.size(100px; 34px;);
			}
		}
	}
}

/* keyframes */

@keyframes bodytop {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	50% {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	75% {
		-webkit-transform: rotate(5deg) translateX(3px);
		-moz-transform: rotate(5deg) translateX(3px);
		-ms-transform: rotate(5deg) translateX(3px);
		-o-transform: rotate(5deg) translateX(3px);
		transform: rotate(5deg) translateX(3px);
	}
	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes bodybottom {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(5deg) translateX(3px);
		-moz-transform: rotate(5deg) translateX(3px);
		-ms-transform: rotate(5deg) translateX(3px);
		-o-transform: rotate(5deg) translateX(3px);
		transform: rotate(5deg) translateX(3px);
	}
	50% {
		-webkit-transform: rotate(5deg) translateX(3px);
		-moz-transform: rotate(5deg) translateX(3px);
		-ms-transform: rotate(5deg) translateX(3px);
		-o-transform: rotate(5deg) translateX(3px);
		transform: rotate(5deg) translateX(3px);
	}
	75% {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes arm {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-ms-transform: rotate(-15deg);
		-o-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}
	50% {
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

html {
	.size(100%; 100%);
	margin: 0;
	padding: 0;
}

body {
	.size(100%; 100%);
	background: radial-gradient(@almost-white 60%, @yellow);
	margin: 0;
	padding: 0;
}

11