CSS3/jQuery Blinking Eyes

Yeah Boy!

by Praveen Kumar Purushothaman

HTML

<div class="catHolder">
    <span class="head">
        <span class="face">
            <span class="eye">
                <span class="lidT"></span>
                <span class="pup"></span>
                <span class="lidB"></span>
            </span>
            <span class="eye">
                <span class="lidT"></span>
                <span class="pup"></span>
                <span class="lidB"></span>
            </span>
            
            <span 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>
            </span>
        </span>
    </span>
</div>

<div class="controls clearfix">
    <div class="blink face-control">Click to blink</div><span class="clearfix"></span>
    <div class="look face-control">Click to Look</div>
    <div class="both face-control">Click for Both</div>
    <div class="scared face-control">Click to be Scared</div>
    <input type="radio" id="loop">
</div>

CSS

html {
    background: #2b2b2b;
}

body {
    margin: 0;
}

.catHolder {
    width: 300px;
    margin: 0 auto;
    position: relative;
    top: 10em;
}

.head {
    display: block;
    position: relative;
    background: #821067;
    border-radius: 100px 100px 0 0;
    height: 200px;
    width: 300px;
}

.head:after, .head:before {
    content: "";
    display: block;
    border-bottom: 130px solid #821067;
    position: absolute;
    top: -20px;
}

.head:before {
    left: 0;
    border-left: 0 solid transparent;
    border-right: 120px solid transparent;
}

.head:after {
    right: 0;
    border-right: 0 solid transparent;
    border-left: 120px solid transparent;
}

.face {
    width: 210px;
    margin: 0 auto;
    display: block;
}

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.eye:before {
    background: #FAD73F;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    border-radius: 50%;
    content: '';
}

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

.lidT {
    display: block;
    width: 100px;
    height: 100px;
    background: #821067;
    position: absolute;
    top: -80px;
    z-index: 20;
}

.lidB {
    display: block;
    width: 100px;
    height: 100px;
    background: #821067;
    position: absolute;
    bottom: -80px;
    z-index: 20;
}

.smile {
    width: 200px;
    height: 80px;
    overflow: hidden;
    position: relative;
    border-top: 2px solid brown;
    top: 50px;
    left: 2px;
    display: block;
}

.hC {
    display: block;
    height: 200px;
    width: 200px;
    background: #f7f7f7;
    border-radius: 50%;
    position:...

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': '80'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 40});
});

$('.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': '80'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 40});
});

$('.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': '20', 'width': '20', top: '40',left: '40'});
    //$('.smile').addClass('rotate');
});