<div id="head" class="happy">
<div class="left eye"></div>
<div class="right eye"></div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
<button id="random">Mood Swing!</button>
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(
circle farthest-side at center bottom,
#009cde,
#003087 125%
);
color: #f7f7f7;
}
#head {
position: relative;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0, 0, 255, 0) 60%, orangered),
radial-gradient(circle, yellow, yellowgreen);
border-radius: 50%;
border: 2px solid #dddd1e;
box-shadow: inset -8px -10px 20px 0px #555;
*,
*::before,
*::after {
position: absolute;
transition: all 0.5s;
}
}
.eye {
background: #fff;
border: 3px solid #000;
overflow: hidden;
&::before {
content: "";
display: block;
background: #000;
}
}
.mouth {
background: #000;
overflow: hidden;
border: 2px solid #000;
}
.teeth {
background: #fff;
width: 80%;
height: 25px;
top: -15px;
left: 10%;
border-radius: 5px;
z-index: 1;
}
.tongue {
background: red;
border-radius: 100%;
box-shadow: inset -20px -10px 22px 0px #600909;
width: 80%;
height: 70%;
bottom: -10%;
left: 15%;
}
/* excited */
.excited .eye {
width: 100px;
height: 95px;
border-radius: 100%;
&::before {
width: 15%;
height: 20%;
left: 45%;
top: 20%;
border-radius: 100%;
}
}
.excited .eye.left {
left: 12%;
top: 25%;
}
.excited .eye.right {
right: 12%;
top: 25%;
}
.excited .mouth {
border-radius: 10px 10px 110px 110px;
width: 50%;
height: 85px;
top: 65%;
left: 24%;
}
/* meh */
.meh .eye {
width: 100px;
height: 5px;
border-radius: 4px;
border-width: 5px;
&::before {
width: 60px;
height: 30px;
left: 30%;
top: -20px;
border-radius: 100%;
}
}
.meh .eye.left {
left: 12%;
top: 35%;
}
.meh .eye.right {
right: 12%;
top: 35%;
}
.meh .mouth {
border-radius: 16px;
width: 50%;
height: 15px;
top: 55%;
left: 24%;
border-width: 10px;
}
/* shocked */
.shocked .eye {
width: 55px;
height: 60px;
border-radius: 100%;
border-width: 3px;
&::before {
width: 20%;
height: 20%;
left: 40%;
top: 40%;
border-radius: 100%;
}
}
.shocked .eye.left {
left: 22%;
top: 25%;
}
.shocked .eye.right {
right: 22%;
top: 25%;
}
.shocked .mouth {
border-radius: 100%;
width: 85px;
height: 85px;
top: 55%;
left: 35%;
}
/* happy */
.happy .eye {
width: 60px;
height: 60px;
border-radius: 100%;
&::before {
width: 50%;
height: 50%;
left: 25%;
top: 25%;
border-radius: 100%;
}
}
.happy .eye.left {
left: 22%;
top: 25%;
}
.happy .eye.right {
right: 22%;
top: 25%;
}
.happy .mouth {
border-radius: 10px 10px 110px 110px;
width: 20%;
height: 55px;
top: 59%;
left: 40%;
}
/* silly */
.silly .eye {
width: 80px;
height: 80px;
border-radius: 100%;
&::before {
width: 30%;
height: 40%;
left: 50%;
top: 20%;
border-radius: 100%;
}
}
.silly .eye.left {
left: 14%;
top: 21%;
}
.silly .eye.right {
right: 17%;
top: 23%;
}
.silly .mouth {
border-radius: 10px 10px 110px 110px;
width: 60%;
height: 85px;
top: 59%;
left: 24%;
transform: rotate(-16deg);
}
/* angry */
.angry .eye {
width: 50px;
height: 20px;
border-width: 6px;
border-radius: 5px 5px 100% 100%;
&::before {
width: 30px;
height: 30px;
left: 25%;
top: -60%;
border-radius: 100%;
}
}
.angry .eye.left {
left: 22%;
top: 35%;
transform: rotate(15deg);
}
.angry .eye.right {
right: 22%;
top: 35%;
transform: rotate(-15deg);
}
.angry .mouth {
border-radius: 100%;
width: 50%;
height: 25px;
top: 65%;
left: 24%;
border-width: 5px;
}
#head.angry {
background: radial-gradient(circle, rgba(0, 0, 255, 0) 60%, orangered),
radial-gradient(circle, red, darkmagenta);
border-color: red;
}
/* button */
button,
button:link,
button:visited {
padding: 15px 30px;
text-decoration: none;
font-size: 18px;
display: block;
margin: 20px auto;
background-color: darkblue;
border: none;
border-radius: 3px;
box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
color: #fff;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
transition-property: transform;
transform: translateZ(0);
transition: box-shadow 0.5s cubic-bezier(0.39, 0.5, 0.15, 1.36);
&:hover {
box-shadow: 0 0 0 28px rgba(0, 0, 0, 0.25) inset;
}
&:active {
transform: translateY(3px);
}
}
View Compiled
const head = document.getElementById("head");
let classes = ["excited", "meh", "shocked", "happy", "silly", "angry"];
document.getElementById("random").onclick = function () {
let emotion = classes[Math.floor(Math.random() * classes.length)];
head.removeAttribute("class");
head.className += emotion;
console.log(emotion);
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.