简单的CSS3贪吃豆动画

共计 731 个字符，预计需要花费 2 分钟才能阅读完成。

无聊透顶，看到B站有个这动画感觉挺有趣的，自己实现了一下。

没有动力码字了，直接上代码吧，就几句话你们自己粘贴一下马上就能用。

HTML：

<div>
  <div class="dot-up">
  </div>
  <div class="dot-down">
  </div>
</div>

CSS：

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

.dot-down {
  background-color: #800080;
  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)
  }
}

效果：