Pure CSS Emoji
A Pen by Peter Butcher on CodePen.
<div class="head"> | |
<div class="face face__happy"> | |
<div class="eye-left"></div> | |
<div class="eye-right"></div> | |
<div class="mouth"></div> | |
</div> | |
</div> | |
<div class="head"> | |
<div class="face face__standard"> | |
<div class="eye-left"></div> | |
<div class="eye-right"></div> | |
<div class="mouth"></div> | |
</div> | |
</div> | |
<div class="head"> | |
<div class="face face__sad"> | |
<div class="eye-left"></div> | |
<div class="eye-right"></div> | |
<div class="mouth"></div> | |
</div> | |
</div> |
Pure CSS Emoji
A Pen by Peter Butcher on CodePen.
html, body { | |
margin: 0; | |
display: flex; | |
width: 100%; | |
height: 100%; | |
background-color: #FFFCEF; | |
} | |
.head { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
margin: auto; | |
width: 250px; | |
height: 250px; | |
background-color: #FFEB97; | |
border-radius: 50%; | |
position: relative; | |
} | |
.face { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
margin: auto; | |
width: 250px; | |
height: 250px; | |
position: relative; | |
} | |
.face__happy { | |
animation: happy-look 5s infinite; | |
} | |
.face__standard { | |
animation: standard-look 5s infinite; | |
} | |
.face__sad { | |
animation: sad-look 5s infinite; | |
} | |
.face__happy .eye-left { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 75px; | |
left: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
} | |
.face__happy .eye-right { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 75px; | |
right: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
} | |
.face__happy .mouth { | |
width: 100px; | |
height: 50px; | |
border-style: solid; | |
border-radius: 50%; | |
border-width: 8px; | |
border-color: transparent transparent #000 transparent; | |
left: 68px; | |
top: 75px; | |
position: absolute; | |
animation: happy-mouth 5s infinite; | |
} | |
.face__standard .eye-left { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 125px; | |
left: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
animation-delay: 1.3s; | |
} | |
.face__standard .eye-right { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 125px; | |
right: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
animation-delay: 1.3s; | |
} | |
.face__standard .mouth { | |
width: 75px; | |
height: 8px; | |
border-radius: 8px; | |
background-color: #000; | |
left: 90px; | |
top: 175px; | |
position: absolute; | |
} | |
.face__sad .eye-left { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 150px; | |
left: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
animation-delay: 3.7s; | |
} | |
.face__sad .eye-right { | |
width: 25px; | |
height: 25px; | |
background-color: #000; | |
border-radius: 50%; | |
top: 150px; | |
right: 45px; | |
position: absolute; | |
animation: blink 5s infinite; | |
animation-delay: 3.7s; | |
} | |
.face__sad .mouth { | |
width: 100px; | |
height: 50px; | |
border-style: solid; | |
border-radius: 50%; | |
border-width: 8px; | |
border-color: #000 transparent transparent transparent; | |
left: 68px; | |
top: 186px; | |
position: absolute; | |
animation: sad-mouth 5s infinite; | |
} | |
@keyframes blink { | |
0% { | |
transform: scale(1, 1); | |
} | |
10% { | |
transform: scale(1, 1); | |
} | |
12% { | |
transform: scale(1, .1); | |
} | |
14% { | |
transform: scale(1, 1); | |
} | |
30% { | |
transform: scale(1, 1); | |
} | |
32% { | |
transform: scale(1, .1); | |
} | |
34% { | |
transform: scale(1, 1); | |
} | |
60% { | |
transform: scale(1, 1); | |
} | |
62% { | |
transform: scale(1, .1); | |
} | |
64% { | |
transform: scale(1, 1); | |
} | |
} | |
@keyframes happy-look { | |
0% { | |
transform: translate(0px, 0px); | |
} | |
10% { | |
transform: translate(10px, 0px); | |
} | |
20% { | |
transform: translate(10px, 0px); | |
} | |
30% { | |
transform: translate(0px, 0px); | |
} | |
60% { | |
transform: translate(0px, 0px); | |
} | |
70% { | |
transform: translate(-10px, -15px); | |
} | |
80% { | |
transform: translate(-10px, -15px); | |
} | |
90% { | |
transform: translate(0px, 0px); | |
} | |
} | |
@keyframes happy-mouth { | |
0% { | |
height: 50px; | |
} | |
10% { | |
height: 50px; | |
} | |
20% { | |
height: 50px; | |
} | |
30% { | |
height: 50px; | |
} | |
60% { | |
height: 50px; | |
} | |
70% { | |
height: 40px; | |
} | |
80% { | |
height: 40px; | |
} | |
90% { | |
height: 50px; | |
} | |
} | |
@keyframes standard-look { | |
0% { | |
transform: translate(0px, 0px); | |
} | |
10% { | |
transform: translate(-25px, 0px); | |
} | |
20% { | |
transform: translate(-25px, 0px); | |
} | |
30% { | |
transform: translate(0px, 0px); | |
} | |
60% { | |
transform: translate(0px, 0px); | |
} | |
70% { | |
transform: translate(15px, -15px); | |
} | |
80% { | |
transform: translate(15px, -15px); | |
} | |
90% { | |
transform: translate(0px, 0px); | |
} | |
} | |
@keyframes sad-look { | |
0% { | |
transform: translate(0px, 0px); | |
} | |
15% { | |
transform: translate(0px, 0px); | |
} | |
25% { | |
transform: translate(0px, -25px); | |
} | |
35% { | |
transform: translate(0px, -25px); | |
} | |
45% { | |
transform: translate(0px, 0px); | |
} | |
70% { | |
transform: translate(0px, 0px); | |
} | |
80% { | |
transform: translate(-15px, -25px); | |
} | |
90% { | |
transform: translate(-15px, -25px); | |
} | |
100% { | |
transform: translate(0px, 0px); | |
} | |
} | |
@keyframes sad-mouth { | |
0% { | |
height: 25px; | |
} | |
15% { | |
height: 25px; | |
} | |
25% { | |
height: 50px; | |
} | |
35% { | |
height: 50px; | |
} | |
45% { | |
height: 25px; | |
} | |
70% { | |
height: 25px; | |
} | |
80% { | |
height: 50px; | |
} | |
90% { | |
height: 50px; | |
} | |
100% { | |
height: 25px; | |
} | |
} |