CSS3 Eyes!

Oh yeahhh!

by Joshua Powell

HTML

<div class="parent">
    <div class="outerEye">
        <span class="innerEye"></span>
    </div>
    <div class="outerEye">
        <span class="innerEye"></span>
    </div>
</div>

CSS

body * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
}

.outerEye {
    width: 200px;
    height: 200px;
    float: left;
    border-radius: 0 50%;
    background: #f7f7f7;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    margin-left: 90px;
    position: relative;
    border: 20px solid tan;
    overflow: hidden;
}

.innerEye {
    display: block;
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #2b2b2b;
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -70px;
    border: 40px solid rgb(0, 173, 255);
}

.parent:hover .innerEye {
    left: 0;
    top: 0;
}