动画让吃豆豆动起来

2024-02-04 10:05:02

CSS实现吃豆豆动画

吃豆豆是一款经典的街机游戏，至今仍然受到很多玩家的喜爱。今天，我们将使用CSS3来制作一个吃豆豆的动画。这个动画非常简单易懂，适合初学者学习。我们将使用CSS3的transform属性来实现吃豆豆的移动，并使用CSS3的animation属性来实现吃豆豆的动画效果。

HTML结构

首先，我们需要创建一个HTML结构来放置吃豆豆的动画。HTML代码如下：

<div class="container">
  <div class="pacman">
    <div class="mouth"></div>
  </div>
</div>

<div class="container">是整个动画的容器，<div class="pacman">是吃豆豆的身体，<div class="mouth">是吃豆豆的嘴巴。

CSS样式

接下来，我们需要为吃豆豆的动画添加CSS样式。CSS代码如下：

.container {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.pacman {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  top: 100px;
  left: 100px;
}

.mouth {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 15px;
  left: 15px;
}

@keyframes move {
  0% {
    left: 100px;
  }

  100% {
    left: 300px;
  }
}

@keyframes open {
  0% {
    width: 20px;
  }

  100% {
    width: 50px;
  }
}

.pacman {
  animation: move 2s infinite alternate;
}

.mouth {
  animation: open 1s infinite alternate;
}

.container的样式设置了动画的容器，.pacman的样式设置了吃豆豆的身体，.mouth的样式设置了吃豆豆的嘴巴。@keyframes move和@keyframes open定义了吃豆豆的移动动画和嘴巴张开动画。.pacman和.mouth的样式分别使用了animation属性来实现动画效果。