CSS FACE TEST - Real Helper

md.shakil hossain

1566

CSS FACE TEST

 <div id="wrap">
<div id="head"></div>
  <div id="eye">
    <div id="ball">
      <div id="lid"></div>
      <div id="inlid" class="blink">
        <div id="pupil" class="look">
          <div id="iris">
            <div id="dot">
              <div id="light" class="light"></div>
            </div>
          </div>
        </div>
      </div>
        
    </div>
  </div>
    <div id="eye">
      <div id="ball">
        <div id="lid"></div>
          <div id="inlid" class="blink">
            <div id="pupil" class="look">
              <div id="iris">
                <div id="dot">
                  <div id="light" class="light"></div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
<div id="nose"></div>

</div>

Try it Yourself >>

 #eye div {position: absolute;}

#wrap {
position: absolute;
top: 5%;
left: 50%;
margin-left: -200px;
}

#head {
width: 400px;
height: 600px;
border-radius:48% 48% 42% 42%;
background: rgba(255, 220, 194, 1);
z-index: 2;
}

#eye {
position: absolute;
top: 170px;
width: 160px;
height: 130px;
background: rgba(221, 190, 167, 0.45);
border-top: 8px solid rgba(171, 148, 131, 1);
margin-top: -8px;
z-index: 3;
}

#eye {
left: 20px;
border-radius: 200% 150% 90% 70%;
}

#eye:nth-child(2) {
left: auto;
right: 20px;
border-radius: 150% 200% 70% 90%;
}

#eye #ball {
top: 60px;
width: 100px;
height: 60px;
background: rgba(255,255,255,0.8);
overflow: hidden;
}

#eye #ball {
left: 50%;
margin-left: -50px;
border-radius: 100% 90% 60% 70%;
}

#eye #lid {
width: 120px;
height: 60px;
background: rgba(221, 190, 167, 1);
left: -10px;
}

#inlid {
width: 120px;
height: 35px;
background: #fff;
border-top: 6px solid rgba(171, 148, 131, 1);
border-bottom: 2px solid rgba(171, 148, 131, 0.9);
margin-top: -6px;
margin-bottom: -2px;
top: 20px;
left: -10px;
border-radius: 50%;
overflow: hidden;
}

#pupil {
width: 55px;
height: 55px;
border-radius: 50%;
background: rgba(172, 186, 114, 0.8);
border: 4px solid rgba(85, 92, 56, 0.1);
top: -25px;
left: 50%;
margin-left: -30px;
z-index:1;
}

#iris {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(85, 92, 56, 0.5);
border: 2px solid rgba(85, 92, 56, 0.2);
top:50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
}

#dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
top:50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}

#light {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
top:50%;
left: 50%;
margin-top: 0;
margin-left: 5px;
}

#nose {
position: absolute;
top: 320px;
left:50%;
margin-left: -60px;
width: 40px; 
height: 50px; 
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid rgba(221, 190, 167, 1);
border-radius: 40%;
}

/*


*/


/* animation test */

.look {
-webkit-animation: look 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: look 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: look 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

.blink {
-webkit-animation: blink 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: blink 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: blink 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

.light {
-webkit-animation: light 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: light 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: light 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

@-webkit-keyframes look {
0% {left:50%}
10% {left:50%}
15% {left:50%}
20% {left:30%}
40% {left:30%}
60% {left:70%}
80% {left:70%}
90% {left:50%}
95% {left:50%}
100% {left:50%}
}
@-moz-keyframes look {
0% {left:50%}
10% {left:50%}
15% {left:50%}
20% {left:30%}
40% {left:30%}
60% {left:70%}
80% {left:70%}
90% {left:50%}
95% {left:50%}
100% {left:50%}
}
@keyframes look {
0% {left:50%}
10% {left:50%}
15% {left:50%}
20% {left:30%}
40% {left:30%}
60% {left:70%}
80% {left:70%}
90% {left:50%}
95% {left:50%}
100% {left:50%}
}

@-webkit-keyframes blink {
0% {height:35px}
10%{height:35px}
80% {height:25px}
85%{height:35px}
90%{height:35px}
92%{height:0px}
94%{height:35px}
100% {height:35px}
}
@-moz-keyframes blink {
0% {height:35px}
10%{height:35px}
80% {height:25px}
85%{height:35px}
90%{height:35px}
92%{height:0px}
94%{height:35px}
100% {height:35px}
}
@keyframes blink {
0% {height:35px}
10%{height:35px}
80% {height:25px}
85%{height:35px}
90%{height:35px}
92%{height:0px}
94%{height:35px}
100% {height:35px}
}

@-webkit-keyframes light {
0% {left:50%}
10% {left:50%}
15% {left:50%; width:10px; height:10px;}
20% {left:80%; width:15px; height:15px;}
40% {left:80%; width:15px; height:15px;}
60% {left:20%; width:13px; height:13px;}
80% {left:20%; width:13px; height:13px;}
90% {left:50%; width:10px; height:10px;}
95% {left:50%}
100% {left:50%}
}
@-moz-keyframes light {
0% {left:50%}
10% {left:50%}
15% {left:50%; width:10px; height:10px;}
20% {left:80%; width:15px; height:15px;}
40% {left:80%; width:15px; height:15px;}
60% {left:20%; width:13px; height:13px;}
80% {left:20%; width:13px; height:13px;}
90% {left:50%; width:10px; height:10px;}
95% {left:50%}
100% {left:50%}
}
@keyframes light {
0% {left:50%}
10% {left:50%}
15% {left:50%; width:10px; height:10px;}
20% {left:80%; width:15px; height:15px;}
40% {left:80%; width:15px; height:15px;}
60% {left:20%; width:13px; height:13px;}
80% {left:20%; width:13px; height:13px;}
90% {left:50%; width:10px; height:10px;}
95% {left:50%}
100% {left:50%}
}

Try it Yourself >>