Felicidades compa vanu

Minions en css y transform

by Jorgelig

HTML

<div>
    <div class='starry' style="display: none;"></div>
    <div> <span class='l1'>H</span>
 <span class='l2'>A</span>
 <span class='l3'>P</span>
 <span class='l4'>P</span>
 <span class='l5'>Y</span>
 <span class='l6'>B</span>
 <span class='l7'>I</span>
 <span class='l8'>R</span>
 <span class='l9'>T</span>
 <span class='l10'>H</span>
 <span class='l11'>D</span>
 <span class='l12'>A</span>
 <span class='l13'>Y</span>

    </div>
    <div> <span class='l1'>C</span>
 <span class='l2'>O</span>
 <span class='l3'>M</span>
 <span class='l4'>P</span>
 <span class='l5'>A</span>
 <span class='l6'>V</span>
 <span class='l7'>A</span>
 <span class='l8'>N</span>
 <span class='l9'>U</span>
 <span class='l14'>!</span>
 <span class='l14'>!</span>
 <span class='l14'>!</span>

    </div>
    <div class='starry' style="display: none;"></div>
    <div style="margin-top: 15px;width: 100%;">
        <button id="btn" type="button">Click para agregarle flores XD</button>
    </div>
</div>
<div class="container">
    <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...

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...

JavaScript

$("#btn").on("click", function () {
    $(".starry").show();
    $(this).hide();
});