xxxxxxxxxx1
<div class="face">2
<div class="eyes-line">3
<div class="eye blink"></div>4
<div class="eye"></div>5
</div>6
<div class="smile"></div>7
</div>xxxxxxxxxx1
body {2
background-image: linear-gradient(120deg,#a1c4fd 0,#c2e9fb 100%);3
}4
5
.face {6
margin: 5rem auto;7
height: 300px;8
width: 300px;9
overflow: hidden;10
background-color: #cd6705;11
background-image: linear-gradient(140deg,#fbec75 0,#cd6705 100%);12
border-radius: 50%;13
box-shadow: inset 0px 0px 0px 7px rgba(146, 0, 0, 0.05), inset 0 30px 30px 0 rgba(255,255,255,.15);14
}15
16
.eyes-line {17
display: flex;18
justify-content: space-between;19
width: 100px;20
margin: 5rem auto;21
}22
23
.eye {24
position: relative;25
width: 30px;26
height: 30px;27
background-image: linear-gradient(140deg,#96633c 0,#663c20 100%);28
border: 1px solid #361e0f;29
border-radius: 50%;30
}31
32
.eye.blink:after {33
content: "";34
position: absolute;35
background: #ebbe4e;36
height: 0px;37
width: 30px;38
left: -2px;39
top: -2px;40
border-radius:50%;41
animation:blink 2.5s infinite;42
}43
44
.smile {45
margin: 0 auto;46
position: relative;47
width: 110px;48
height: 30px;49
border-bottom: 20px solid #985c06;50
border-radius: 0 0 25px 25px;51
animation: smile 2.5s infinite;52
}53
54
.smile:before {55
content: "";56
position:absolute;57
height:30px;58
top: 0;59
left: 0;60
right: 0;61
bottom: 0;62
box-shadow: 0px 2px 1px rgba(0,0,0,.15);63
border-radius: 0 0 25px 25px;64
animation: smile 2.5s infinite;65
}66
67
@keyframes blink {68
0% {69
height: 0;70
}71
75% {72
height: 20px;73
}74
}75
76
@keyframes smile {77
0% {78
border-radius: 0 0 25px 25px;79
}80
65% {81
border-radius: 0 0 45px 45px;82
}83
}1
1
Console errors: 0