<div class="body">
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth">
<div class="tooth"></div>
<div class="tongue"></div>
</div>
</div>
</div>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) rotate(5deg);
}
40% {
transform: translateY(30px) rotate(-5deg);
}
60% {
transform: translateY(15px) rotate(0deg);
}
}
body {
min-height: 100vh;
display: flex;
background-color: #161E24;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
.body {
width: 350px;
height: 450px;
bottom: -50px;
background-color: #993ca0;
border-radius: 100px 100px / 90px 90px 0 0;
position: absolute;
display: flex;
justify-content: center;
animation: bounce 1s ease infinite;
&:after {
content: '';
position: absolute;
border-radius: 100%;
background-color: rgba(0,0,0,0.25);
width: 10px;
height: 10px;
right: 88px;
top: 44px;
box-shadow:
-13px -12px 0 2px rgba(0, 0, 0, 0.25),
22px -35px 0 7px rgba(0, 0, 0, 0.25),
-180px 301px 0 7px rgba(0, 0, 0, 0.25),
-160px 321px 0 2px rgba(0, 0, 0, 0.25),
20px 280px 0 1px rgba(0, 0, 0, 0.25);
}
}
.face {
width: 70%;
position: absolute;
}
.eye {
position: absolute;
top: 100px;
background-color: #1D1E1D;
width: 50px;
height: 50px;
border-radius: 100%;
box-shadow:
0px 0px 0px 15px #fff,
0px 0px 0px 22px rgba(0,0,0,0.25);
&:before,
&:after {
content: '';
position: absolute;
border-radius: 100%;
background-color: #fff;
}
&:before {
top: -7px;
right: 0px;
width: 30px;
height: 30px;
}
&:after {
bottom: 0px;
left: 7px;
width: 15px;
height: 15px;
}
&.left { left: 20px }
&.right { right: 20px }
}
.mouth {
position: relative;
top: 200px;
height: 100px;
background-color: #221A24;
border-radius: 100% 100% / 15px 15px 150px 150px;
overflow: hidden;
}
.tooth {
position: relative;
background-color: #fff;
width: 50px;
height: 50px;
border-radius: 100px 100px / 0 0 100px 100px;
top: -25px;
left: 20px;
box-shadow:
60px 0 0 0 #fff,
155px 0 0 0 #fff;
}
.tongue {
position: absolute;
width: 120px;
height: 120px;
top: 40px;
left: 30px;
border-radius: 100%;
background-color: #8a1a3e;
box-shadow: 70px 0px #8a1a3e;
&:before {
content: '';
position: absolute;
border-radius: 100%;
background-color: #de3350;
width: 86px;
height: 115px;
top: -29px;
right: 16px;
transform: scale(1, 0.5);
box-shadow: 70px 0px #de3350;
}
&:after {
content: '';
position: absolute;
border-radius: 100%;
background-color: #fff;
width: 5px;
height: 5px;
right: -40px;
top: 20px;
box-shadow: -13px -12px 0 2px #fff;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.