Pure CSS3 Doraemon

Kelebihan CSS3 dibandingkan versi sebelumnya yaitu pada tampilan hasilnya lebih dinamis dan interaktif. Berikut ini contoh dari penerapan CSS3 murni tanpa menggunakan gambar untuk membuat Figur Animasi Doraemon. Figur doraemon yang dibuat hanya menggunakan HTML dan CSS3.

Demo Download

CSS

#doraemon{
 position:relative;
 margin:50px; 
}

#head_light{
 width:50px;
 height:50px;
 transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
 box-shadow:80px 20px 50px #fff;
  -webkit-box-shadow:80px 20px 55px #fff;
  -moz-box-shadow:80px 20px 50px #fff;
 border-radius:45px;
  -webkit-border-radius:45px;
  -moz-border-radius:60px;
 position:absolute;
 top:-20px;
 left:170px;
 opacity:0.5
}

#face{
 position:relative;
 width:310px;
 height:300px;
 border-radius:146px;
  -webkit-border-radius:146px;
  -moz-border-radius:146px;
 background:#07beea; 
 background: linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
  background: -webkit-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
  background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
  background: -o-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
  background: -ms-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);  
 border:#333 2px solid;
 top:-15px;
 box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
  -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
  -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
 
}

#base{
 position:relative;
 top:-5px;
}

#base_white{
 position:absolute;
 border:#000 2px solid;
 width:264px;
 height:196px;
 border-radius: 150px 150px;
  -webkit-border-radius: 150px 150px;
  -moz-border-radius: 150px 150px;
 background:#FFF;
 background: linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  background: -webkit-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  background: -o-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  background: -ms-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
 z-index:1;
 top:85px;
 left:22px; 
}


#eyes{
 position:relative;
 top:-5px;
}

div.eye{
 position:absolute;
 border-radius: 35px 35px;
  -webkit-border-radius: 35px 35px;
  -moz-border-radius: 35px 35px;
 border:2px solid #000;
 width:72px;
 height:83px;
 z-index:20;
 background:#fff;
}

div.black_eye{
 position:absolute;
 width:15px;
 height:15px;
 border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
 background:#333;
 z-index:21;
  -webkit-animation-name: cate;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 200;
}

@-webkit-keyframes cate{
 0%{
  margin:0 0 0 0;
 }
 80% {
  margin:0px 0 0 0;
 }
 85% {
  margin:-20px 0 0 0;
 }
 90%{
  margin:0 0 0 0;
 }
 93%{
  margin:0 0 0 7px;
 }
 96%{
  margin:0 0 0 0;
 }
 100%{
  margin:0 0 0 0;
 }
}

div.black_left{
 top:100px;
 left:130px;
}

div.black_right{
 top:100px;
 left:170px;
}

div.eye_left{
 top:45px;
 left:82px; 
}

div.eye_right{
 top:45px;
 left:156px; 
}

#nose{
 width:32px;
 height:32px;
 border:2px solid #000;
 border-radius:50px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
 background:#c93e00;
 position:absolute;
 top:117px;
 left:139px;
 z-index:30;
}

#nose_light{
 width:10px;
 height:10px;
 border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
 box-shadow:19px 8px 5px #fff;
  -webkit-box-shadow:19px 8px 5px #fff;
  -moz-box-shadow:19px 8px 5px #fff;
 position:relative;
 top:0px;
 left:0px;
}


#nose_line{
 background:#333;
 width:3px;
 height:100px;
 top:140px;
 left:155px;
 position:absolute;
  z-index:20;
}


#mouth{
 width:240px;
 height:240px;
 border-bottom:3px solid #333;
 border-radius:120px;
  -webkit-border-radius:120px;
  -moz-border-radius:120px;
 position:absolute;
 top:0px;
 left:35px;
 z-index:50;
 clip:rect(205px auto auto auto);
}


.whiskers{
 background:#333;
 height:2px;
 width:60px;
 position:absolute;
 z-index:20;
}
.whi_right{
 top:165px;
 left:210px; 
} 

.whi_right_top{
 top:145px;
 left:210px;
} 

.whi_right_bottom{
 top:185px;
 left:210px;
} 

.whi_left{
 top:165px;
 left:50px; 
} 
.whi_left_top{
 top:145px;
 left:50px;
} 

.whi_left_bottom{
 top:185px;
 left:50px;
}

.rotate20{
 transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
}

.rotate160{
 transform: rotate(160deg);
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
}

HTML

<div id="doraemon">
 <div id="face">
     <div id="head_light"></div>
     <div id="eyes">
     <div class="eye eye_left"></div>
         <div class="black_eye black_left"></div>
        
       <div class="eye eye_right"></div>
         <div class="black_eye black_right"></div>
        </div>
        <div id="base">
   <div id="base_white"></div>
    <div id="nose">
     <div id="nose_light"></div>
    </div>
                <div id="nose_line"></div>
                <div id="mouth"></div>
                <div id="mouth_rewrite"></div>
                <div id="firefox_mouth"></div>

    <div class="whiskers whi_right_top rotate160"></div>
    <div class="whiskers whi_right"></div>
    <div class="whiskers whi_right_bottom rotate20"></div>
                    
    <div class="whiskers whi_left_top rotate20"></div>
    <div class="whiskers whi_left"></div>
    <div class="whiskers whi_left_bottom rotate160"></div>
        </div>
 </div>
</div>

Untuk mempelajari kode ini lebih lanjut, silahkan klik tombol dibawah ini: