HTML
<ul id="emoji">
<li class="layer" data-depth="0.2">
<div class="face"></div>
</li>
<li class="layer" data-depth="0.3">
<div class="shine"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye left"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye right"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="mouth"></div>
</li>
</ul>
SCSS
$sunglow: #FECA32;
$golden-brown: #A1620F;
$raw-umber: #6E440B;
$white: #FFFFFF;
$eye-color: $golden-brown;
$eye-size-w: 24px;
$eye-size-h: 38px;
$face-color: $sunglow;
$face-size: 230px;
$mouth-color: $raw-umber;
$mouth-size-w: 94px;
$mouth-size-h: 48px;
$shine-color: $white;
$shine-size-w: $face-size - 36px;
$shine-size-h: $face-size - 24px;
@mixin pos($t: 0, $r: 0, $b: 0, $l: 0) {
position: absolute;
top: $t;
right: $r;
bottom: $b;
left: $l;
margin: auto;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#emoji {
position: relative;
width: $face-size;
height: $face-size;
transform: translate3d(0, 0, 0);
padding-left: 0;
list-style-type: none;
}
.layer {
position: absolute;
width: 100%;
height: 100%;
}
.face {
@include pos;
width: $face-size;
height: $face-size;
background-color: $face-color;
border-radius: 100%;
box-shadow: inset rgba(black, 0.4) 0 0 30px;
}
.shine {
@include pos;
width: $shine-size-w;
height: $shine-size-h;
background: linear-gradient(to bottom, $shine-color, rgba(255,255,255,0) 50%, rgba(255,255,255,0));
border-radius: 100%;
opacity: 0.8;
}
.eye {
$pos-x: 70px;
$pos-y: 40px;
width: $eye-size-w;
height: $eye-size-h;
background-color: $eye-color;
border-radius: 100%;
box-shadow:
inset rgba(black, 0.5) 0 6px 12px,
rgba(white, 0.2) 0 2px 0 2px;
animation: blink 5s infinite;
&.left {
@include pos($b: $pos-y, $r: $pos-x);
}
&.right {
@include pos($b: $pos-y, $l: $pos-x);
}
}
.mouth {
$pos-y: 88px;
@include pos($t: $pos-y);
overflow: hidden;
width: $mouth-size-w;
height: $mouth-size-h;
transform: translate3d(0, 0, 0);
&:before {
$pos-y: 10px;
@include pos($b: $pos-y);
content: "";
width: 100%;
height: 100%;
background-color: $mouth-color;
border-radius: 100%;
box-shadow: rgba(white, 0.25) 0 3px 0;
transform: scale(1.0);
}
&:after {
$pos-x: 0;
$pos-y: 26px;
@include pos($b: $pos-y, $l: $pos-x);
content: "";
width: calc(100% - 20px);
height: 100%;
background-color: $face-color;
border-radius: 100%;
box-shadow: rgba(black, 0.8) 0 4px 4px -4px;
transform-origin: 50% 100%;
transform: scale(1.6);
}
}
@keyframes blink {
0%, 96% { transform: scaleY(1.0) }
98% { transform: scaleY(0.1); }
100% { transform: scaleY(1.0); }
}
