CSS Eyes Animation
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)
}
}
Advertisements
It’s really looking very nice and increase my interest towards codding….thank you for giving such knowledge to all of us…love from INDIA
LikeLiked by 1 person
thank you so much for beautiful comment. India ❤
LikeLike