* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}
.pacman {
min-width: 150px;
height: 150px;
position: relative;
top: 20px;
}
@keyframes open-top {
from {
transform: rotate(0deg) translateX(0);
}
to {
transform: rotate(-45deg) translateX(-15px);
}
}
@keyframes open-bottom {
from {
transform: rotate(0deg) translateX(0);
}
to {
transform: rotate(45deg) translateX(-15px);
}
}
.pac-top {
width: 100%;
height: 50%;
background-color: hsl(60, 50%, 50%);
border-radius: 150px 150px 0 0;
animation: open-top .3s infinite alternate;
}
.pac-bottom {
width: 100%;
height: 50%;
background-color: hsl(60, 50%, 50%);
border-radius: 0 0 150px 150px;
animation: open-bottom .3s infinite alternate;
}
@keyframes move-left {
from {
left: 0;
}
to {
left: -600px;
}
}
.pellets {
display: flex;
position: relative;
left: 500px;
}
.pellet {
position: absolute;
margin: 0 10px;
background-color: hsl(60, 50%, 50%);
height: 40px;
width: 40px;
border-radius: 50%;
top: 10px;
animation: move-left 1.2s infinite linear;
}
var pellets = document.querySelector('.pellets');
function newPellet() {
var pellet = document.createElement('div');
pellet.className = 'pellet';
pellets.appendChild(pellet);
}
newPellet();
setTimeout(newPellet, 300);
setTimeout(newPellet, 600);
setTimeout(newPellet, 900);