HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="text-line">
<h1 class="p">
P
<div class="pac-man">
<div class="eye"></div>
</div>
</h1>
<div class="awesome">
<div class="awesome-board">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="ghost">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="pac-man">
<div class="eye"></div>
</div>
</div>
</div>
<h1 class="c">
c
<div class="pac-man">
<div class="eye"></div>
</div>
</h1>
</div>
<h1 class="dash">-</h1>
<div class="text-line">
<h1 class="m">
M
<div class="ghost ghost-2">
<div class="eye"></div>
<div class="eye"></div>
</div>
</h1>
<div class="awesome">
<div class="awesome-board">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="ghost">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="pac-man">
<div class="eye"></div>
</div>
</div>
</div>
<h1 class="n">
n
<div class="ghost ghost-2">
<div class="eye"></div>
<div class="eye"></div>
</div>
</h1>
</div>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:700');
*, *::before, *::after {
box-sizing: border-box;
}
$size: 25vmin;
$bg-color: #46bfee;
body {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
font-family: 'IBM Plex Mono', monospace;
background: $bg-color;
animation: change-bg 8s infinite;
}
.wrapper {
display: flex;
position:relative;
flex-wrap: wrap;
&-inner {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(2);
& > .dot {
transform: scale(2);
background: #fff;
}
}
}
@keyframes change-bg {
0% {background: $bg-color}
33% {background: #ea82e5}
66% {background: #db851c}
}
.text-line {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 50vmin;
line-height: 50vmin;
margin: 0 0px;
font-weight: bold;
letter-spacing: -3vmin;
// overflow: hidden;
}
.dash {
width: 10vmin;
color: transparent;
position: relative;
&::after {
content: '';
position: absolute;
height: 5vmin;
width: 10vmin;
transform: translate(-50%, -50%);
background: #000;
top: 60%;
left: 30%;
}
}
.awesome {
width: $size;
height: $size;
background: #000;
position: relative;
right: -2vmin;
top: 5vmin;
border-radius: 10px;
// animation: rotate 8s infinite linear;
&::before {
content: '';
width: 30%;
height: 60%;
position: absolute;
top: 60%;
left: 70%;
background: #000;
}
&::after {
content: '';
width: 50%;
height: 50%;
position: absolute;
border-radius: 10px;
top: 25%;
left: 25%;
background: $bg-color;
animation: change-bg 8s infinite;
}
}
@keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
.ghost {
width: 25%;
height: 25%;
background: #d03e19;
position: absolute;
border-radius: 50% 50% 0 0;
animation: move-pac-man linear 8s infinite -6.5s;
&::before, &::after {
content: '';
position: absolute;
border: $size * .06 solid transparent;
border-bottom: $size * .06 solid #000;
bottom: 0;
}
&::after {
right: 0;
}
.eye {
position: absolute;
height: 30%;
width: 20%;
background: #fff;
border-radius: 50% 50% 0 0;
top: 20%;
left: 30%;
&:nth-child(2) {
left: 70%;
}
&::after {
content: '';
position: absolute;
width: $size * .03;
height: $size * .03;
background: #000;
border-radius: 100%;
right: 10%;
bottom: 10%;
}
}
}
.pac-man {
width: $size * .25;
height: $size * .25;
position: absolute;
transform-origin: center center;
animation: move-pac-man linear 8s infinite;
@keyframes move-pac-man {
0% {transform: translate(0,0)}
24% {transform: translate($size * .75,0)}
26% {transform: translate($size * .75,0) rotate(90deg)}
49% {transform: translate($size * .75,$size * .75) rotate(90deg)}
51% {transform: translate($size * .75,$size * .75) rotate(180deg)}
74% {transform: translate(0vmin,$size * .75) rotate(180deg)}
76% {transform: translate(0vmin,$size * .75) rotate(270deg)}
98% {transform: translate(0vmin,0vmin) rotate(270deg)}
100% {transform: translate(0vmin,0vmin) rotate(360deg)}
}
.eye {
width: 20%;
height: 20%;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20%;
left: 30%;
z-index: 1;
&::after {
content: '';
width: 50%;
height: 50%;
border-radius: 100%;
background: #000;
position: absolute;
transform: translate(-50%, -50%);
left: 75%;
top: 75%;
}
}
&::before, &::after {
content: '';
background: #fdff00;
width: 100%;
height: 50%;
position: absolute;
}
&::before {
border-radius: 0 0 $size * .5 $size * .5;
top: 50%;
transform-origin: center top;
animation: chomp .25s infinite;
}
@keyframes chomp {
0%, 100% {transform: rotate(2deg)}
50% {transform: rotate(30deg)}
}
&::after {
border-radius: $size * .5 $size * .5 0 0;
transform-origin: center bottom;
animation: chomp-2 .25s infinite;
}
@keyframes chomp-2 {
0%, 100% {transform: rotate(-2deg)}
50% {transform: rotate(-30deg)}
}
}
.dot {
width: $size * .03;
height: $size * .03;
background: #db851c;
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
top: 12.5%;
left: 15%;
animation: eat-dot 8s infinite -.2s;
&:nth-of-type(2) {
left: 40%;
animation: eat-dot 8s infinite .5s;
}
&:nth-of-type(3) {
left: 62.5%;
animation: eat-dot 8s infinite 1s;
}
&:nth-of-type(4) {
left: 85%;
animation: eat-dot 8s infinite 1.5s;
}
&:nth-of-type(5) {
left: 85%;
top: 40%;
animation: eat-dot 8s infinite 2.5s;
}
&:nth-of-type(6) {
left: 85%;
top: 62.5%;
animation: eat-dot 8s infinite 3s;
}
&:nth-of-type(7) {
left: 85%;
top: 85%;
animation: eat-dot 8s infinite 3.5s;
}
&:nth-of-type(8) {
left: 62.5%;
top: 85%;
animation: eat-dot 8s infinite 4.3s;
}
&:nth-of-type(9) {
left: 40%;
top: 85%;
animation: eat-dot 8s infinite 5s;
}
&:nth-of-type(10) {
left: 15%;
top: 85%;
animation: eat-dot 8s infinite 5.5s;
}
&:nth-of-type(11) {
left: 15%;
top: 62.5%;
animation: eat-dot 8s infinite 6.3s;
}
&:nth-of-type(12) {
left: 15%;
top: 40%;
animation: eat-dot 8s infinite 6.9s;
}
@keyframes eat-dot {
0% {opacity: 1}
3% {opacity: 0}
30% {opacity: 0}
100% {opacity: 1}
}
}
.p {
position: relative;
.pac-man {
animation: pac-man-p 8s linear infinite;
top: 18%;
left: 16%;
}
@keyframes pac-man-p {
0%, 100%{transform:translate(0,0) rotate(90deg)}
48%{transform:translate(0,27vmin) rotate(90deg)}
52%{transform:translate(0,27vmin) rotate(-90deg)}
98%{transform:translate(0,0vmin) rotate(-90deg)}
}
}
.c {
position: relative;
.pac-man {
animation: none;
transform: scale(1.5);
top: 56%;
left: 51%;
}
}
.ghost-2 {
width: 30%;
height: 20%;
&::before, &::after {
content: '';
position: absolute;
border: $size * .06 solid transparent;
border-top: $size * .06 solid #d03e19;
top: 100%;
}
&::after {
right: 0%;
}
}
.m {
position: relative;
.ghost {
animation: none;
top: 68%;
left: 40%;
animation: bounce-ghost 3s infinite;
}
}
@keyframes bounce-ghost {
0% {
transform: translate(0,0);
}
50% {
transform: translate(0,-50%);
}
}
.n {
position: relative;
.ghost {
animation: none;
top: 58%;
left: 41%;
animation: bounce-ghost 3s infinite;
}
}
