console
<div class="face face-1"></div>
<div class="face face-2"></div>
<div class="face face-3"></div>
<div class="face face-4"></div>
<div class="hair hair-1"></div>
<div class="hair hair-2"></div>
<div class="hair hair-3"></div>
<div class="mouth-left-1"></div>
<div class="mouth-right-1"></div>
<div class="ear ear-left-1"></div>
<div class="ear ear-right-1"></div>
<div class="eye-left-1"></div>
<div class="eye-right-1"></div>
<div class="face-6"></div>
<div class="face-7"></div>
:root {
--bg1: #F5C023;
--bg2: #A66528;
}
body {
background-color: var(--bg1);
margin: auto;
}
body * {
position: absolute;
}
.face-1 {
z-index: 2;
width: 48vmin;
height: 42vmin;
top: 50vmin;
left: 50vmin;
transform: translate(-50%, -50%);
background-color: var(--bg2);
border-top-left-radius: 89% 100%;
border-top-right-radius: 90% 100%;
border-bottom-right-radius: 90% 77%;
border-bottom-left-radius: 90% 77%;
}
.face-2,
.face-3,
.face-4 {
z-index: 2;
background-color: var(--bg1);
}
.face-2,
.face-3 {
top: 35vmin;
left: 35vmin;
width: 19vmin;
height: 25vmin;
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 77%;
border-bottom-left-radius: 90% 77%;
transform: rotate(13deg);
}
.face-3 {
left: 47vmin;
transform: scaleX(-1) rotate(13deg);
}
.face-4 {
top: 43vmin;
left: 32vmin;
width: 37vmin;
height: 24vmin;
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 88%;
border-bottom-left-radius: 90% 89%;
}
.hair-1,
.hair-2,
.hair-3,
.hair-1::after,
.hair-2::after,
.hair-3::after {
z-index: 1;
background-color: var(--bg2);
top: 26vmin;
left: 41vmin;
width: 3vmin;
height: 11vmin;
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 88%;
border-bottom-left-radius: 90% 89%;
transform: rotate(2deg);
overflow: inherit;
}
.hair-1::after,
.hair-2::after,
.hair-3::after {
content: "";
display: block;
margin-left: 2vmin;
transform: rotate(-4deg) translateY(0.5vmin);
}
.hair-2 {
top: 25vmin;
left: 45vmin;
transform: rotate(-6deg);
}
.hair-2::after::after {
transform: rotate(-4deg) translateY(0.5vmin);
}
.hair-3 {
top: 24vmin;
left: 48vmin;
width: 4vmin;
height: 11vmin;
transform: rotate(-6deg);
}
.hair-3::after {
margin-left: 3vmin;
transform: rotate(-6deg) translateY(0.5vmin);
}
.mouth-left-1,
.mouth-right-1 {
--mouth-rotate: -6deg;
z-index: 2;
top: 56vmin;
left: 44.6vmin;
width: 5vmin;
height: 2vmin;
background-color: var(--bg1);
border: 0.5vmin solid var(--bg2);
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 88%;
border-bottom-left-radius: 90% 89%;
transform: rotate(var(--mouth-rotate));
overflow: inherit;
}
.mouth-left-1::after,
.mouth-right-1::after {
content: "";
display: block;
width: 107%;
height: 100%;
background-color: var(--bg1);
margin-top: -0.8vmin;
margin-left: 0.1vmin;
}
.mouth-right-1 {
left: 50.2vmin;
transform: scaleX(-1) rotate(var(--mouth-rotate));
}
.ear-left-1,
.ear-right-1 {
z-index: 1;
top: 45vmin;
left: 19vmin;
width: 10vmin;
height: 10vmin;
background-color: var(--bg1);
border: 1vmin solid var(--bg2);
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 88%;
border-bottom-left-radius: 90% 89%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ear-right-1 {
left: 69vmin;
transform: scaleX(-1);
}
.ear-left-1::after,
.ear-right-1::after {
content: "";
display: block;
width: 60%;
height: 58%;
top: 50%;
left: 50%;
background-color: var(--bg2);
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 90% 88%;
border-bottom-left-radius: 90% 89%;
}
.eye-left-1,
.eye-right-1 {
z-index: 2;
top: 48vmin;
left: 34vmin;
width: 10vmin;
height: 2vmin;
background-color: var(--bg2);
border-radius: 3vmin;
overflow: inherit;
transition: transform 0.5s;
}
.eye-right-1 {
left: 57vmin;
}
.eye-left-1::before,
.eye-right-1::before {
content: "";
display: block;
width: 42%;
height: 92%;
background-color: var(--bg1);
border: 0.5vmin solid var(--bg2);
border-bottom: none;
margin-top: -10vmin;
margin-left: 5vmin;
border-radius: 75% 69% 0 0/150% 142% 0 0;
transform: rotate(-4deg);
}
.eye-right-1::before {
transform: rotate(4deg);
margin-left: 0vmin;
}
div:hover~.eye-right-1,
div:hover~.eye-left-1 {
transform: translateY(-1vmin);
}
.eye-right-1::after,
.eye-left-1::after {
content: "";
display: block;
width: 2vmin;
height: 2vmin;
margin-top: 9vmin;
margin-left: 6vmin;
border-radius: 50%;
background-color: var(--bg2);
transition: opacity 0.5s;
opacity: 0;
}
div:hover~.eye-right-1::after,
div:hover~.eye-left-1::after {
opacity: 1;
}
.face-6,
.face-6::before,
.face-6::after,
.face-7,
.face-7::before,
.face-7::after {
z-index: 2;
background-color: var(--bg2);
top: 50vmin;
left: 32vmin;
width: 2.5vmin;
height: 5vmin;
border-top-left-radius: 100% 106%;
border-top-right-radius: 100% 106%;
border-bottom-right-radius: 100% 95%;
border-bottom-left-radius: 100% 95%;
transform: rotate(37deg);
overflow: inherit;
}
.face-6::before,
.face-6::after,
.face-7::before,
.face-7::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--bg2);
}
.face-6::before,
.face-7::before {
margin-left: 2vmin;
margin-top: -1.5vmin;
transform: rotate(20deg);
}
.face-6::after,
.face-7::after {
margin-left: 4vmin;
margin-top: -6.5vmin;
transform: rotate(18deg);
}
.face-7 {
left: 60vmin;
}
.ear {
animation: ear-animation 3s linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 0.1s;
}
@keyframes ear-animation {
80% {
margin-top: 0vmin;
}
90% {
margin-top: 0.5vmin;
}
100% {
margin-top: -0.1vmin;
}
}
.hair {
animation:hair-animation 3s linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 1s;
}
@keyframes hair-animation {
80% {
transform: rotate(2deg);
}
100% {
transform: rotate(-5deg);
}
}