HTML CODE:

    <div class="wrapper">
        <div class="eye left"><span></span></div>
        <div class="eye right"><span></span></div>
    </div>
    <div class="nose"></div>

CSS CODE:

body{
    background:#ff6600;
}
.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    display: flex;
    justify-content: space-between;
    transform: translate3d(-50%,-70%,0);
}
.nose{
    content: "";
    position: absolute;
    top: 50%;
    left:50%;
    width:130px;
    height:130px;
    background: #000;
    border-radius:50%;
    transform:translate(-50%,-50%);
}
.eye{
    position:relative;
    width:260px;
    height:260px;
    background:#fff;
    border-radius:50%;
    animation:eye 3.5s infinite;
}
.left span,
.right span{
    content:"";
    position:relative;
    top:-30%;
    left:10%;
    display:block;
    width:65%;
    height:2%;
    background:#000;
    border: 20px solid #000;
    border-radius:50%;
}
.left span:before,
.right span:before{
    content: "";
    position:absolute;
    top:10px;
    left: -12px;
    width:210px;
    height:30px;
    background: #ff6600;
    border-radius:70% 70% 0 0;
}
.eye::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:65%;
    height:65%;
    background:#000;
    border-radius:50%;
    transform:translate3d(-50%,-50%,0);
    animation: eyes 17.5s infinite;
}
@keyframes eye{
   0%,
   5%,
   30%,
   37%,
   100%{
       height: 260px;
       transform:translate3d(0,0,0);
   }
    3%,
    33%{
        height: 0;
        transform: translate3d(0, -50%, 0);
    }
}
@keyframes eyes{
    0%,
    20%{
        transform:translate3d(-100%,-50%,0)
    }
    21%,
    40%,
    81%,
    100%{
        transform: translate3d(-50%,-50%,0);
    }
    41%,
    60%{
        transform:translate3d(0,-50%,0);
    }
    61%,
    80%{
        transform:translate3d(-50%,0,0)
    }
}

Published by Truecodes

Instagram: codeblogger website: truecodes.org View all posts by Truecodes