<!doctype html>
<!-- credit https://codepen.io/pbutcher/pen/wMxwbr
for the emojis
-->
<meta charset=utf-8>
<HTML>
<HEAD>
<link rel="stylesheet" href="style.css">
</HEAD>
<BODY>
<div class="glow"><marquee behavior="scroll" direction="left" scrollamount="15">CREATING ANIMATIONS WITH CSS </marquee></div>
<div class="head pink">
<div class="face happy">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
</div>
<div class="head yellow">
<div class="face standard">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
</div>
<div class="head blue">
<div class="face sad">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
</div>
</BODY>
</HTML>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #ffd1f7, #fffbc6, #b4fcff, #ffd1f7,#b4fcff,#fffbc6);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
max-width:100%;
}
.glow {
position:absolute;
width: 80%;
left:10%;
top: 10%;
height: 80px;
margin: 0 auto;
text-align: center;
padding: 10px;
color: pink;
font: 60px 'Poiret One', cursive;
box-shadow: inset 0px 0px 14px #ff96ed, 0px 0px 14px #ffd1f7;
text-shadow: 0px 0px 14px #ffd1f7, 2px 2px 4px #000;
border: 2px solid pink;
border-radius: 15px;
animation: neon 12s ease infinite;
}
@keyframes neon {
0% {
color: #b4fcff;
border: 2px solid #b4fcff;
text-shadow: 0px 0px 10px #b4fcff, 2px 2px 4px #000;
box-shadow: inset 0px 0px 10px #8cfbff, 0px 0px 10px #b4fcff;
}
50% {
color: #ffd1f7;
border: 2px solid #ffd1f7;
text-shadow: 0px 0px 14px #ffd1f7, 2px 2px 4px #000;
box-shadow: inset 0px 0px 14px #ffbbbb, 0px 0px 14px #ffd1f7;
}
75% {
color: #fffbc6;
border: 2px solid #fffbc6;
text-shadow: 0px 0px 10px #fffbc6, 2px 2px 4px #000;
box-shadow: inset 0px 0px 10px #fff77a, 0px 0px 10px #fffbc6;
}
100% {
color: #b4fcff;
border: 2px solid #b4fcff;
text-shadow: 0px 0px 10px #b4fcff, 2px 2px 4px #000;
box-shadow: inset 0px 0px 10px #97fbff, 0px 0px 10px #b4fcff;
}
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
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;
}
.pink{
background-color: #ffd1f7;
}
.yellow{
background-color: #fffbc6;
}
.blue{
background-color: #b4fcff;
}
.happy {
animation: happy-look 5s infinite;
}
.standard {
animation: standard-look 5s infinite;
}
.sad {
animation: sad-look 5s infinite;
}
.eye
{
width: 25px;
height: 25px;
position: absolute;
background-color: #000;
border-radius: 50%;
}
.mouth
{
width: 100px;
height: 50px;
border-style: solid;
border-radius: 50%;
border-width: 8px;
border-color: transparent transparent #000 transparent;
position: absolute;
}
.happy .eye {
top: 75px;
animation: blink 12s infinite;
}
.happy .mouth {
left: 68px;
top: 80px;
animation: happy-mouth 10s infinite;
}
.left{
left:45px;
}
.right{
left:165px;
}
.standard .eye {
top: 125px;
animation: blink 6s infinite;
animation-delay: 1.3s;
}
.standard .mouth {
width: 75px;
height: 8px;
border-radius: 8px;
left: 75px;
top: 175px;
}
.sad .eye {
top: 130px;
position: absolute;
animation: blink 20s infinite;
animation-delay: 3.7s;
}
.sad .mouth {
border-color: #000 transparent transparent transparent;
left: 68px;
top: 186px;
animation: sad-mouth 10s 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;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.