看到哔哩哔哩的幻灯上有一个张嘴的效果很好玩，这里做一个玩一玩

html代码：

<div class="center">
            <div class="eat-up">
            </div>
            <div class="eat-down">
            </div>
        </div>

css代码:

.center{
    width: 100px;
    height:100px;
    margin: 100px auto;
}
.eat-up {
  background-color: green;
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  animation: eat-haha-up 1s infinite;
  transform-origin: center bottom;
}

.eat-down{
  background-color: green;
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px;
  animation: eat-haha-down 1s infinite;
  transform-origin: center top;
}

@keyframes eat-haha-up {
  0% {transform: rotate(0)
  }

  25% {transform: rotate(-45deg)
  }

  50% {transform: rotate(0)
  }

  75% {transform: rotate(-45deg)
  }

  to {transform: rotate(0)
  }
}

@keyframes eat-haha-down {
  0% {transform: rotate(0)
  }

  25% {transform: rotate(45deg)
  }

  50% {transform: rotate(0)
  }

  75% {transform: rotate(45deg)
  }

  to {transform: rotate(0)
  }
}