怪物吃豆豆.gif

普通方式

<div class="container">
  <div class="monster">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

body {
    background-color: #5B5B5B;
}

.container {
  margin-top: 180px;
  margin-left: 10px;
  width: 100vw;
  height: 100vh;
  
}

.monster {
  width: 200px;
  height: 200px;
  /* background-color: #EE6A50; */
  
  border-radius: 50%;
  box-shadow: 300px 0px 0px -80px #EEA2AD, 
              400px 0px 0px -80px #EEA2AD,
              500px 0px 0px -80px #EEA2AD,
              600px 0px 0px -80px #EEA2AD;
  animation: beans 1s linear infinite;
}

.top, 
.bottom {
  width: 200px;
  height: 100px;
  margin-left: 110px;
  background-color: #FFD700;
}

.top {
  border-radius: 100px 100px 0 0;
  transform: rotate(-30deg);
  animation: mouthHandlerTop 1s linear infinite;
}

.bottom {
  border-radius: 0 0 100px 100px;
  transform: rotate(30deg);
  animation: mouthHandlerBottom 1s linear infinite;
}

高级方式

<div class="container">
  <div class="monster">
  </div>
</div>

body {
    background-color: #5B5B5B;
}

.container {
  margin-top: 180px;
  margin-left: 10px;
  width: 100vw;
  height: 100vh;
  
}

.monster {
  width: 200px;
  height: 200px;
  /* background-color: #EE6A50; */
  
  border-radius: 50%;
  box-shadow: 300px 0px 0px -80px #EEA2AD, 
              400px 0px 0px -80px #EEA2AD,
              500px 0px 0px -80px #EEA2AD,
              600px 0px 0px -80px #EEA2AD;
  animation: beans 1s linear infinite;
}

.monster:before, 
.monster:after {
 content: '';
display: block;
  width: 200px;
  height: 100px;
  margin-left: 110px;
  background-color: #FFD700;
}

.monster:before {
  border-radius: 100px 100px 0 0;
  transform: rotate(-30deg);
  animation: mouthHandlerTop 1s linear infinite;
}

.monster:after {
  border-radius: 0 0 100px 100px;
  transform: rotate(30deg);
  animation: mouthHandlerBottom 1s linear infinite;
}

动画

@keyframes beans {
  0%{
    box-shadow: 250px 0px 0px -80px #EEA2AD, 
                350px 0px 0px -80px #EEA2AD,
                450px 0px 0px -80px #EEA2AD,
                550px 0px 0px -80px #EEA2AD;
  }
  100% {
    box-shadow: 150px 0px 0px -80px #EEA2AD, 
                250px 0px 0px -80px #EEA2AD,
                350px 0px 0px -80px #EEA2AD,
                450px 0px 0px -80px #EEA2AD;
  }
}

@keyframes mouthHandlerTop {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes mouthHandlerBottom {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}