CSS3/jQuery Blinking Eyes

Yeah Boy!

by Joshua Powell

HTML

<div class="eye">
    <span class="lidT"></span>
    <span class="pup"></span>
    <span class="lidB"></span>
</div>
<div class="eye">
    <span class="lidT"></span>
    <span class="pup"></span>
    <span class="lidB"></span>
</div>

<div class="smile">
    <span class="hC"><span class="teethLine"></span><span class="tL"></span><span class="tL"></span><span class="tL"></span><span class="tL"></span><span class="tL"></span></span>
</div>

<div class="blink">Click to blink</div>
<div class="look">Click to Look</div>
<div class="both">Click for Both</div>
<div class="scared">Click to be Scared</div>

CSS

html {
    background: #3b3b3b;
}

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #f7f7f7;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.pup {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background: #2b2b2b;
    border: 5px solid #05D3DD;
    display: block;
    position: absolute;
    top: 25px;
    left: 25px;
}

.lidT {
    display: block;
    width: 100px;
    height: 100px;
    background: rgb(240, 184, 123);
    position: absolute;
    top: -80px;
    z-index: 20;
}

.lidB {
    display: block;
    width: 100px;
    height: 100px;
    background: rgb(240, 184, 123);
    position: absolute;
    bottom: -80px;
    z-index: 20;
}

.smile {
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-top: 2px solid brown;
    top: 20px;
    left: 2px;
}

.hC {
    display: block;
    height: 200px;
    width: 200px;
    background: #f7f7f7;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    box-shadow: 0 5px 0 brown;
    overflow: hidden;
}

.teethLine {
    height: 1px;
    width: 200px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 45px;
    display: block;
}

.tL {
    width: 1px;
    height: 200px;
    background: rgba(0, 0, 0, 0.6);
    float: left;
    bottom: 45px;
    display: block;
    margin-left: 40px;
}

.blink {
    position: absolute;
    right: 0;
    top: 20px;
    background: brown;
    display: inline-block;
    padding: 15px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 22px;
    color: #fff;
    font-family: "century gothic";
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    border-radius: 20px 0 0 20px;
    cursor: pointer;
}

.look {
    position: absolute;
    right: 0;
    top: 100px;
    background: brown;
   ...

JavaScript

$('.blink').on('click', function() {
    $('.lidT').animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
});

$('.look').on('click', function() {
    $('.pup').animate({'left': '50'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 25});
});

$('.both').on('click', function() {
    $('.lidT').animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
    $('.pup').delay(900).animate({'left': '50'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 25});
});

$('.scared').on('click', function() {
    $('.lidT').animate({top: '-100'}, 800).delay(200).animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-100'}, 800).delay(200).animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
    $('.pup').animate({'height': '50', 'width': '50', top: '20',left: '20'}, 500).delay(1000).animate({'height': '40', 'width': '40', top: '25',left: '25'});
});