SOURCE

console 命令行工具 X clear

                    
>
console
<div id="kokeshi"></div>
//pardon the mess
$bg:lightcoral;
$body:darkcyan;
$face:beige;
$flowers:cadetblue;
$black: black;
$mouth:crimson;

$n:20vw;
html{
  height:100%;
}
body{
  margin: 0;
  background: $bg;
  height:100%;
  background: radial-gradient(ellipse,
  $bg 0,
  darken($bg, 15) 100%);
}
//kokeshi body
#kokeshi{
  width:$n;
  height:$n*1.3;
  background: $body;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  position: relative;
  margin:auto;
  top:50%;
  box-shadow:
    inset 0 (-$n)  $n/10 0 rgba(white, .2),     //neck shadow
         inset 0 (-$n/10)  0 0 rgba(black, .2),     //neck shadow
    inset $n/4   (-$n/1.5)  0 0 darken($body, 6),     //kimono (l)
    inset $n/3   (-$n/1.5)  0 0 darken($bg, 20),     //kimono (l)
    inset (-$n/4) (-$n/1.5)  0 0 darken($body, 3),     //kimono (r)
    inset (-$n/3) (-$n/1.5)  0 0 darken($bg, 30),     //kimono (r)
}
//face
#kokeshi:after{
  content:'';
  position: absolute;
  border-radius:50% ;
  top:-($n/5.9);
  left:$n/5;
  width:$n/5;
  height:$n/10;
  background: $face;
  -webkit-backface-visibility:hidden;
  // border-radius:50%;
  z-index:999;
  box-shadow:
    ($n/2.2)   ($n/7) $n/10   0  rgba($mouth,.2),     //blush (r) 
    (-$n/20)   ($n/7) $n/10   0  rgba($mouth,.2),     //blush (l)
      
    ($n/2.3)   0        0     0   $face,        // eyelid (r)
    (-$n/50)   (-$n/30) 0     0   $black,       // eye (l)
    ($n/2.2)   (-$n/30) 0     0   $black,       // eye (r)
    ($n/2.2)   (-$n/12) $n/15 ($n/50)  rgba($flowers,.5),     //eyeshadow (r) 
    (-$n/20)  (-$n/12) $n/15 ($n/50)  rgba($flowers,.5),     //eyeshadow (l)
      
  
    
    ($n/4.5)     ($n/13)  0     0    $face,        //mouth
    ($n/4.5)     ($n/8)   0  (-$n/40) $mouth,      //mouth
      
      // ($n*.8)   (-$n*.35) 0 ($n*.1) $mouth,         //flower1 
        
    ($n*.8)   (-$n*.35) 0 ($n*.2) $black,          //bun (r)
    (-$n*.39) (-$n*.35) 0 ($n*.2) $black,          //bun (l)   
   
      $n/4.7 (-$n/5.5) $n/20   $n/3   $face,              //face hilight
    $n/4.7 (-$n/5.5) 0   $n/2.55   darken($face, 7),              //face
    $n/4.7 (-$n/4)   0   $n/2.5    $mouth,                //headband
  
    ($n*.21) (-$n*.6) 0 ($n*.5) $black             //bun (top)
  ; 

}
//bangs
#kokeshi:before{
  content:'';
  position: absolute;
  top:-$n + $n/4;
  left:(-$n/15);
  box-sizing:border-box;
  height:$n;
  width:$n*1.15;
  border-top:solid $n/2 $black;
  border-left:solid $n/6 $black;
  border-right:solid $n/6 $black;
  border-bottom:solid $n/2 transparent;
  border-radius:  40%   40%   40%  40% /80%  80%  80%  80%; 
  z-index:9999;
}