Minions in Pure CSS

by Jorgelig

HTML

<div class="container">

				<h1>Saludando a la Maria cachetitos</h1>
				<h6>Deja el vicio :p </h6>
			<div class="bill">

				<div class="lights">
					<span class="white_light"></span>
					<span class="dark_light"></span>
				</div>
				<div class="hair">
					<span class="hair1"></span>
					<span class="hair1 make_it_left_hair1"></span>
					<span class="hair2"></span>
				</div>

				<div class="eyes">
					<div class="eye_animate"></div>

					<div class="glasses"></div>
						<div class="white_part">
							<div class="brown_eye">
								<span class="black_part"></span>
							</div>
						</div>
				</div>

				<div class="black_tie">
					<span class="right_tie">
						<div class="top_tie"></div>
						<div class="down_tie"></div>
					</span>
					<span class="left_tie">
						<div class="top_tie"></div>
						<div class="down_tie"></div>
					</span>
				</div>

				<div class="smile"></div>

				<div class="arm"></div>
				<div class="hand"><span class="hand_parts"><span></div>

				<div class="arm make_it_right_arm"></div>
				<div class="hand make_it_right_hand"><span class="hand_parts"><span></div>

				<div class="curves">
					<span class="curve1"></span>
					<span class="curve1 make_it_left_curve"></span>
					<span class="curve2"></span>
				</div>

				<div class="clothes">
					<div class="main"></div>
					<div class="blue_borders"></div>
					<div class="right_shirt"></div>
					<div class="right_shirt make_it_left"></div>
					<div class="bottom"></div>
				</div>

				<div class="pocket">
					<div class="logo"></div>
					<span class="lines"></span>
				</div>

				<div class="legs">
					<div class="right_leg"></div>
					<div class="right_leg make_it_left_leg"></div>
					<div class="shoes"><span class="small_shoes"></span></div>
					<div class="shoes make_it_left_shoes"><span class="small_shoes"></span></div>
				</div>

				<h2>Bill</h2>
			</div>





			<div class="jerry">

				<div class="lights">
					<span...

CSS

* { margin: 0; padding: 0;}

body {
	position: relative;}

.container {width: 970px;margin: 0 auto;padding-top: 70px;transition: ease 0.3s all;
-webkit-transition: ease 0.3s all;}

.container h1, h6 {text-align: center;color: #696969; font-family: tahoma;}

h6 {color:#BDBDBD; margin-bottom: 30px}

h6 a {text-decoration: none;color:#95A4B8;}

h6 a:hover {color:#6180A8;}

.bill {background: #f1cb48;
background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
background: -o-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
background: -ms-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
; width: 140px;height: 290px;
border-radius: 70px;
float: left;
margin-left: 30px;
position: relative;
transition: ease 0.3s all;
-webkit-transition: ease 0.3s all;
}



.bill *, .jerry *, .evil * {position: absolute; box-sizing:content-box;
    -moz-box-sizing:content-box;}

.glasses {background-color: rgba(0, 0, 0, 0);
border: #949699 solid 11px;
width: 57px;
height: 57px;
border-radius: 50%;
top: 30px;
left: 31px;
z-index: 99;}

.eye_animate { width: 57px;  
    height: 0px;  
    border-radius: 31%;
    background-color: #F9D65C;  
    top: 41px;  
    left: 42px;
    z-index: 9;
    animation: eyes_animation 1.5s ease 2s infinite;
    -o-animation: eyes_animation 1.5s ease 2s infinite;
    -moz-animation: eyes_animation 1.5s ease 2s infinite;
    -webkit-animation: eyes_animation 1.5s ease 2s infinite;
}


@-moz-keyframes eyes_animation
{
0%  ...