Animated Emoji Eating Popcorn Using HTML, CSS And Js

Taohedul Islam

3263

this is funny programming that make you luffing. the output of this code is an emoji eating something randomly. and never stop his eating. I hope you enjoy this code

 <div class="pacman">
  <div class="pac-top"></div>
  <div class="pac-bottom"></div>
</div>
<div class="pellets">
</div>

Try it Yourself >>

 * {
  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;
}

Try it Yourself >>

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);

Try it Yourself >>