Skip to content
Advertisements

CSS Eye Animation

CSS Eye Animation

HTML

 <div class="eye">
        <div class="shut">
            <span></span>
        </div>
        <div class="ball"></div>
    </div>

CSS

    body{
        padding:0;
        margin:0;
        background:#333;
    }
    .eye {
        width: 200px;
        height: 200px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        border-radius: 75% 0;
        overflow: hidden;
        cursor: pointer
    }
    .ball{
        width:40px;
        height:40px;
        background:#222f3e;
        border-radius:50%;
        border:30px solid #576574;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);            
    }
    .shut{
        width:300px;
        height:160px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) rotate(-45deg);
        z-index:999;
    }
    .shut span{
        display:block;
        width:100%;
        height:15%;
        background:#ff6b6b;
        border-radius: 0 0 60% 60%;
        transition:0.4s all;
    }
    .eye:hover > .shut span{
        height:100%;
    }
Advertisements

2 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: