Сделать половину контейнера с переливом: скрыто ⇐ CSS

[Anonymous]

Как вы видите на картинке (прикрепляю ее ниже), Пакман должен был съесть эту точку, но она прошла насквозь. Чтобы предотвратить это действие, я создал псевдо-элемент(.pacman::before) и хотел сделать его переполненным: скрытым для скрытия точек, когда он попадает в рот pacman. Это не работает. Есть идеи, ребята? Или другой подход?

Код: Выделить всё

/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Centralized the game */
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: gray;
}

/* Game Container */
.game-container {
display: flex;
align-items: center;
width: 70%;
height: 100px;
overflow: hidden;
}

/* Pacman */
.pacman {
display: inline-block;
width: 80px;
height: 80px;
background-image: url("../images/pacman1.png");
background-size: contain;
background-repeat: no-repeat;
animation: chomping 0.6s linear 1s infinite;
z-index: 1;
}

.pacman::before {
position: relative;
display: block;
content: "";
width: 40px;
height: 80px;
overflow: hidden;
}

@keyframes chomping {
0% {
background-image: url("../images/pacman1.png");
}

16.67% {
background-image: url("../images/pacman2.png");
}

33.33% {
background-image: url("../images/pacman3.png");
}

50% {
background-image: url("../images/pacman4.png");
}

66.67% {
background-image: url("../images/pacman3.png");
}

83.33% {
background-image: url("../images/pacman2.png");
}

100% {
background-image: url("../images/pacman1.png");
}
}

/* Dots */
.dots {
width: 90%;
height: 30px;
position: relative;
}

.dots::before {
content: "";
width: 400%;
height: 100%;
background-image: radial-gradient(circle, white 30%, transparent 15%);
background-size: 40px 20px;
position: absolute;
background-repeat: repeat-x;
left: 0;
top: 10%;
animation: dots-moving 23.5s linear 1s infinite;
}

@keyframes dots-moving {
0% {
transform: translateX(0);
}

100% {
transform: translateX(-50%);
}
}

Код: Выделить всё

Document

[img]https: //i.sstatic.net/CbKNRg2r.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/793 ... flowhidden