CSS Emoji

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); } }
JAVASCRIPT
Expand for more options Login