Dancing Cactus by

Flascher

On: 15 Jul 2016

Personal site: https://www.github.com/flascher

fullscreen 
<div id="background"></div>
<div id="sand"></div>
<div id="sun"></div>
<div id="cloud">
	<div id="puff1"></div>
	<div id="puff2"></div>
</div>
<div id="cactus">
	<div id="trunk"></div>
	<div id="leftArmHoriz"></div>
	<div id="rightArmHoriz"></div>
	<div id="leftArmVert"></div>
	<div id="rightArmVert"></div>
</div>

* {
	margin: 0;
}

#background {
	position: absolute;
	top: 0;
	left: 0;
	
	z-index: -1;
	
	width: 100vw;
	height: 100vh;
	
	background-color: #19B5FE;
}

#sand {
	position: absolute;
	top: 90vh;
	left: 0;
	
	z-index: 0;
	
	width: 100vw;
	height: 10vh;
	
	background-color: #F4B350;
}

#sun {
	position: absolute;
	
	top: -5vw;
	right: -5vw;
	
	width: 20vw;
	height: 20vw;
	
	border-radius: 100%;
	
	background-color: #E9D460;
}

#cloud {
	position: absolute;
	
	top: 15vh;
	left: 5vw;
	
	height: 20vh;
	width: 20vw;
}

#puff1 {
	position: relative;
	
	width: 100%;
	height: 50%;
	
	border-radius: 5rem;
	
	background-color: #F2F1EF;
}

#puff2 {
	position: relative;
	
	top: -75%;
	left: 20%;
	
	width: 65%;
	height: 50%;
	
	border-radius: 5rem;
	
	background-color: #F2F1EF;
}

#cactus {
	position: absolute;
	top: 5vh;
	left: 0;
	
	z-index: 1;
	
	width: 100vw;
	height: 90vh;
	
	transform-origin: 50% 100%;
	
	animation: dance 1.5s infinite;
	animation-timing-function: ease-in-out;
}

#trunk {
	position: relative;
	
	left: 45vw;
	top: 0;
	
	width: 10vw;
	height: 100vh;
	
	border-radius: 5rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	
	background-color: #00B16A;
}

#leftArmHoriz {
	position: absolute;
	
	top: 50vh;
	left: 30vw;
	
	width: 20vw;
	height: 12vh;
	
	border-radius: 5rem;
	
	background-color: #00B16A;
}

#rightArmHoriz {
	position: absolute;
	
	top: 35vh;
	left: 50vw;
	
	width: 15vw;
	height: 10vh;
	
	border-radius: 5rem;
	
	background-color: #00B16A;
}

#leftArmVert {
	position: absolute;
	
	top: 30vh;
	left: 30vw;
	
	width: 7vw;
	height: 30vh;
	
	border-radius: 5rem;
	
	background-color: #00B16A;
}

#rightArmVert {
	position: absolute;
	
	top: 12vh;
	left: 60vw;
	
	width: 5vw;
	height: 30vh;
	
	border-radius: 5rem;
	
	background-color: #00B16A;
}

@keyframes dance {
	0% {
		transform: skewX(0deg) scaleY(1);
	}
	
	25% {
		transform: skewX(10deg) scaleY(0.8);
	}
	
	50% {
		transform: skewX(0deg) scaleY(1);
	}
	
	75% {
		transform: skewX(-10deg) scaleY(0.8);
	}
	
	100% {
		transform: skewX(0deg) scaleY(1);	
	}
}

16