A Pen by CarterTsai.

doraemon.markdown

doraemon

A Pen by CarterTsai on CodePen.

License.

icon.markdown

icon

A Pen by CarterTsai on CodePen.

License.

index.html

<div class="box">
  <div class="head">
      <div class="face">
        <div class="line L1"></div>
        <div class="line L2"></div>
        <div class="line L3"></div>
        <div class="line R1"></div>
        <div class="line R2"></div>
        <div class="line R3"></div>
      </div>
      <div class="eye_box">
            <div class="eye"></div>
            <div class="eye"></div>
      </div>
      <div class="mouth">
        
      </div>
  </div>
</div>

style.scss

@import "compass/css3";
$box-height: 400px;
$box-width: 400px;

$eye_box_width: 120px;

.box {
   width: $box-width;
   height: $box-width;
   border: 1px solid #ccc;
   /* animation: rotate_head 2s linear 0s infinite alternate; */
  .head {
      border-radius: 50%;
	    width: 210px;
	    height: 195px; 
      border: 1px solid #889977;
      margin-left: auto;
      margin-right: auto;
      background: #218ec9;
     
      .face {
          border-radius: 49%;
	        width : 180px;
	        height: 168px;
          border: 1px solid #ccc;
          margin-left: auto;
          margin-right: auto;
          position: absolute;
          top: 35px;
          left: 118px;
          z-index: 0;
          background: white;
          &:after{
              display: block;
              content:"";
              width: 2px;
              height: 90px;
              border: 1px solid #889977;
              position: absolute;
              margin: 0 auto;
              top: 30px;
              left: 88px;
              background: black;
          }
        
        .line {
          border-top-style:solid; 
          border-top-width: 3px;
          width: 55px;
          height: 10px;
          position: absolute;
          z-index: 20;
       }
      
        $LeftTopOffset : 50px;
        $LeftLeftOffset: 20px;
        .line.L1 {
            top: $LeftTopOffset+0px;
            left: $LeftLeftOffset;
            transform: rotate(11deg);
        }
        
        .line.L2 {
            top: $LeftTopOffset+15px;
            left: $LeftLeftOffset;
        }
        .line.L3 {
            top: $LeftTopOffset+30px;
            left: $LeftLeftOffset;
            transform: rotate(351deg);
        }
      
        .line.R1 {
            top: $LeftTopOffset+0px;
            right: $LeftLeftOffset;
            transform: rotate(-10deg);
        }
        .line.R2 {
            top: $LeftTopOffset+15px;
            right: $LeftLeftOffset;
        }
        .line.R3 {
            margin-top: $LeftTopOffset+30px;
            right: $LeftLeftOffset;
            transform: rotate(11deg);
        }
      }
  
      .mouth {
        z-index: 4;
        width:  120px;
      	height: 60px;
        border-top-width: 0px;
        top: 10px;
        left: 47px;        
        position: relative;
        optcity: 0.9;
        border-radius: 90% 90% 90% 90%;
        border-bottom: 45px solid red;
        &:after {
              display: block;
              border-radius: 70%;
              content:"";
              width: 60px;
              height: 30px;
              border: 1px solid #889977;
              position: relative;
              margin: 0 auto;
              top: 73px;
              left: 1px;
              background: #c77550;
          }
      }
      
      
    
      .eye_box {
           z-index: 4;
           width: $eye_box_width;
	         height: 50px; 
           //border: 1px solid #889977;
           margin-left: 40px;
           margin-top: 15px;
      
          // nose
          &:after {
              display: block;
              border-radius: 50%;
              content:"";
              width: 5px;
              height: 5px;
              border: 12px solid red;
              position: relative;
              margin: 0 auto;
              top: 30px;
              left: 5px;
              background: white;
          }
          .eye {
             background: white;
             position: relative;
             border-radius: 50%;
	           width: 45px;
	           height: 50px; 
             border: 1px solid #889977;
             float: left;
             left: 15px;
             top: -5px;
             margin: 0 auto;
           
              &:after {
                  border-radius: 50%;
                  display: block;
                  content:"";
                  width: 3px;
                  height: 6px; 
                  border: 7px solid black;
                  position: relative;
                  margin: 0 auto;
                  top: 16px;
                  left: 13px;
                  background: #fff;
                  animation: move_eye 2s linear 0s infinite alternate;
              }
            
            &:first-child {
              margin-right: 5px;
            }
          }
      }
  }
}

@keyframes move_eye { 
  from { margin-left:-20%; } 
  to { margin-left:30%;} 
}