CodePen

HTML

            
              <div class="full">
                
                <div class="cap-detail">
                        <div class="it-1"></div>
                        <div class="it-2"></div>
                        <div class="it-3"></div>
                        <div class="it-4"></div>
                        <div class="it-5"></div>
                </div>
                
                <div class="head">
                        
                        <div class="head-content">
                        
                                <div class="cap">
                                        <div class="cap-content">
                                                <div class="cap-borda">
                                                </div>
                                        </div>        
                                </div>
                        
                                <div class="countenance-full">
                                
                                        <div class="countenance-content">
                                        
                                                <div class="countenance">
                                                 
                                                        <div class="countenance-model countenance-2">
                                                        
                                                                <div class="eyes-2">
                                                                        <div class="eye-2 left-top"> 
                                                                        </div>
                                                                        <div class="eye-2 left-bottom"> 
                                                                        </div>
                                                                        
                                                                        <div class="eye-2 right-top"> 
                                                                        </div>
                                                                        <div class="eye-2 right-bottom"> 
                                                                        </div>
                                                                </div> 
                                                        
                                                                <div class="mouth-2">
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="lip left"></div>
                                                                        <div class="lip right"></div>
                                                                </div>
                                                                
                                                                <div class="chin"></div>
                                                                
                                                                <div class="fat"></div>
                                                                
                                                        </div>
                                                        
                                                        <div class="countenance-model countenance-1">
                                                        
                                                                <div class="eyes-2">
                                                                        <div class="eye-detail">
                                                                        </div>
                                                                
                                                                        <div class="eye left">
                                                                                <div class="iris"></div>
                                                                        </div>
                                                                        
                                                                        <div class="eye right">
                                                                                <div class="iris"></div>
                                                                        </div>
                                                                </div>
                                                        
                                                                <div class="mouth"></div>
                                                                
                                                                <div class="chin"></div>
                                                                
                                                                <div class="fat"></div>
                                                                
                                                        </div>
                                        
                                                </div>
                                                
                                        </div>
                                        
                                </div>
                        
                        </div>
                </div>
                
                <div class="body">
                
                        <div class="hand left">
                                <div class="finger"></div>
                        </div>
                        <div class="hand right">
                                <div class="finger"></div>
                        </div>
                
                        <div class="shirt det-1"></div>
                        <div class="shirt det-2"></div>
                
                        <div class="zipper">
                                <div class="button"></div>
                                <div class="button"></div>
                                <div class="button"></div>
                        </div>
                
                </div>
                
                <div class="leg">
                        <div class="thigh left"></div>
                        <div class="thigh right"></div>
                        <div class="foot left"></div>
                        <div class="foot right"></div>
                </div>
        
        </div>
        
        <p class="author">
                Luiz Felipe Tartarotti Fialho<br>
                <a title="@LFeh" href="http://twitter.com/LFeh">@LFeh</a><br>
                <a title="@LFeh" href="http://www.felipefialho.com/">http://www.felipefialho.com/</a><br>
        </p>
            
          
!

CSS

            
              /****************** Default **********************/   

.full{
    height: 275px;
    margin: 30px auto 0;
    position: relative;
    width: 300px;
}

/****************** HEAD **********************/   

.head{
    left: 50%;
    margin: 0 0 0 -112px;
    position: relative;
    top: 10px;
    z-index: 2;
}

.head-content{
    border-radius: 50%;
    height: 182px;
    width: 224px;
        overflow: hidden;
}
 
.cap{ 
    left: 0;
    position: absolute;
    top:0;
    z-index: 2;
}

.cap-content,
.countenance-content{
    border-radius: 50%;
    height: 182px;
    width: 224px;
        overflow: hidden;
}

.cap-content{background: #00BBC9; }

.cap-detail{
    height: 20px;
    left: 120px;
    position: absolute;
    top: 0;
    width: 55px;
    z-index: 5;
}

.cap-detail div{
    border-radius: 50%;
        background: #ffe11d;
        width: 20px;
        height: 14px;
    position: absolute;
}

.cap-detail .it-1{
    top: 5px;
        left: 1px;
}
.cap-detail .it-2{
    top: 1px;
        left: 10px;
}
.cap-detail .it-3{
    left: 15px;
    top: 5px;
}
.cap-detail .it-4{
    left: 24px;
    top: 3px;
}
.cap-detail .it-5{
    left: 33px;
    top: 6px;
}

.cap-borda{
        background: #FEE01C; 
    border-radius: 50%;
    height: 182px;
    margin: 48px 0 0 -29px;
    width: 300px;
    z-index: 3;
}

.countenance-full{ 
    left: 0;
    position: relative;
    top:0;
    z-index: 4;
}

.countenance{
        background: #fdd6aa;  
    border-radius: 50%;
    height: 182px;
    margin: 57px 0 0 -30px;
    width: 306px;
}

.countenance-1{
        -webkit-animation: countenance 7s infinite step-start 0s;
        -moz-animation: countenance 7s infinite step-start 0s;
        -o-animation: countenance 7s infinite step-start 0s;
        -ms-animation: countenance 7s infinite step-start 0s;
        animation: countenance 7s infinite step-start 0s;
}

.countenance-2{
        -webkit-animation: countenance-2 7s infinite step-start 0s;
        -moz-animation: countenance-2 7s infinite step-start 0s;
        -o-animation: countenance-2 7s infinite step-start 0s;
        -ms-animation: countenance-2 7s infinite step-start 0s;
        animation: countenance-2 7s infinite step-start 0s;
}

.countenance-model{
        background: #fdd6aa;  
}

.eye-detail{
    border-left: 1px solid #666666;
    border-radius: 50%;
    height: 31px;
    left: 55px;
    position: absolute;
    top: 15px;
    width: 28px;
    z-index: 5;
}

.eye{
        -webkit-animation: eyes 3s infinite step-start 0s;
        -moz-animation: eyes 3s infinite step-start 0s;
        -o-animation: eyes 3s infinite step-start 0s;
        -ms-animation: eyes 3s infinite step-start 0s;
        animation: eyes 3s infinite step-start 0s;
        background: none repeat scroll 0 0 #FFF;  
        border:2px solid #D8D2C7;
    border-radius: 50%;
    height: 60px;
    position: absolute;
    top: 2px;
    width: 53px;
    z-index: 6;
}


.eye.left{
    left: 1px;
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        transform: rotate(30deg);
}
.eye.right{
    right: 0;
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        transform: rotate(-30deg);
}

.iris{
        -webkit-animation: iris 3s infinite step-start 0s;
        -moz-animation: iris 3s infinite step-start 0s;
        -o-animation: iris 3s infinite step-start 0s;
        -ms-animation: iris 3s infinite step-start 0s;
        animation: iris 3s infinite step-start 0s;
        background: none repeat scroll 0 0 #000000;
    border-radius: 50%;
    height: 6px;
    position: absolute;
    top: 20px;
    width: 6px;
    z-index: 7;
}

.eye.left .iris{right: 13px}
.eye.right .iris{left: 13px}

.mouth{
    border-bottom: 2px solid #333333;
    border-radius: 50%;
    bottom: 32px;
    height: 12px;
    left: 50%;
        margin: 0 0 0 -15px;
    position: absolute;
    width: 30px;
    z-index: 8;
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg)
        -o-transform: rotate(5deg)
        transform: rotate(5deg)
}

.mouth-2{
        background: #333;
    border-bottom: 2px solid #333333;    
        bottom: 25px;
    height: 25px;
    left: 50%;
        margin: 0 0 0 -40px;
    position: absolute;
    width: 80px;
    z-index: 8;
}

.tooth{   
        background: #fff;
    border-radius: 10%;
        border-top: none;
        float: left;    
        height: 13px;
    margin: 0 1px;
    width: 14px;
    border-top: 2px solid #333; 
}

.lip{
        background: #FDD6AA;
        height: 48px;
    position: absolute;
    top: 0;
    width: 25px;
}

.lip.left{
        left: 0;
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    border-right: 2px solid #333333;    
}

.lip.right{
        right: 0;
        -moz-transform: rotate(60deg);
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    border-left: 2px solid #333333;  
}

.eyes-2{
    height: 20px;
    left: 50%;
    margin: 0 0 0 -55px;
    position: absolute;
    top: 57px;
    width: 110px;
}

.eye-2{
        background: #333;
        height: 2px;
    position: absolute;
    width: 55px;
}

.eye-2.left-top{
        -moz-transform: rotate(20deg);
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg); 
    left: 0; 
    top: 21px;
}
.eye-2.left-bottom{
        left: 0;
        -moz-transform: rotate(-20deg); 
        -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg); 
    top: 40px;
}

.eye-2.right-top{
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg); 
    right: 0; 
    top: 21px;
}
.eye-2.right-bottom{
        right: 0;
        -moz-transform: rotate(20deg); 
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg); 
    top: 40px;
}

.chin{
    border-bottom: 1px solid #333333;
    border-radius: 50%;
    bottom: 20px;
    height: 12px;
    left: 50%;
        margin: 0 0 0 -23px;
    position: absolute;
    width: 46px;
    z-index: 8;
}

.fat{
    border-bottom: 1px solid #333333;
    border-radius: 50%;
    bottom: 10px;
    height: 113px;
    left: 50%;
        margin: 0 0 0 -95px;
    position: absolute;
    width: 190px;
    z-index: 8;
}
 
/****************** BODY **********************/    

.body{
        background: #ED314C;
    border-radius: 50%;
    height: 155px;
    left: 4px;
    position: absolute;
    top: 106px;
    width: 295px;
    z-index: 1;
}

.shirt{
        background: #ED314C;
    border-radius: 50%;
    height: 82px;
    position: absolute;
    width: 165px;
    z-index: 2;
}

.shirt.det-1{
        bottom: 0px;
    right: 8px;
}

.shirt.det-2{
        bottom: 0px;
    left: 12px;
}

.hand{
        background: #FFE11D;
    border-radius: 50%;
    height: 45px;
    position: absolute;
    top: 63px;
    width: 50px;
    z-index: 3;
}

.hand.left{left: -11px;}
.hand.right{right: -11px;}

.finger{
        background: #FFE11D;
    border: 1px solid #aaa;
    border-radius: 50%;
    height: 15px;
    position: absolute;
    top: 5px;
    width: 15px;
    z-index: 4;
}

.hand.left .finger{right: -5px;}
.hand.right .finger{left: -5px;}

.zipper{
    border-radius: 20% 20% 20% 20%;
    border-right: 1px solid #333333;
    height: 70px;
    left: 120px;
    position: absolute;
    top: 85px;
    width: 35px;
    z-index: 5;
}

.button{
        background: none repeat scroll 0 0 #333333;
    border-radius: 50%;
    height: 10px;
    margin: 10px 27px;
    width: 4px;
    z-index: 6;
}


/***********************************************************/  
/****************** CORPO **********************/  
/***********************************************************/  

.leg{
        background: #7d4935;
    height: 70px;
    left: 58px;
    position: absolute;
    top: 202px;
    width: 190px;
    z-index: 0;
}

.foot{
        background: #2d2b38;
    border-radius: 38%;
        border-top: 1px solid #2D2B38;
        box-shadow:         -2px 6px 6px rgba(50, 50, 50, 0.42);
    bottom: -7px;
    height: 11px;
    position: absolute;
    width: 120px;
    z-index: 1;
}

.foot.left{left: -25px;}
.foot.right{right: -25px;}

.thigh{
        background: #7d4935;
    height: 58px;
    position: absolute;
        top: 10px;
    width: 25px;
    z-index: 1;
}

.thigh.left{
        left: -22px;
        -webkit-transform: rotate(-16deg);
        -moz-transform: rotate(-16deg);
        transform: rotate(-16deg);
}
.thigh.right{
        right: -22px;
        -webkit-transform: rotate(16deg);
        -moz-transform: rotate(16deg);
        transform: rotate(16deg);
}
 
/****************** AUTHOR **********************/  

.author {
        bottom: 50px;
    color: #777777;
    font-size: 1.6em;
    line-height: 1.2em;
    position: absolute;
    right: 20px;
}

.author a {
    color: #2B2B2B;
    font-size: 0.8em;
    font-weight: bolder;
        text-decoration: underline;
}
 
/****************** ANIMATION **********************/  

@-webkit-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@-moz-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@-o-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}

@-moz-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-webkit-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-o-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-moz-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   25%, 65% {
                opacity: 1;
   }
}

@-webkit-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@-o-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@-moz-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@-webkit-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@-o-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................