用css3写一个行人在街道上行走的动画图片效果在HTML且样式好看

首先，需要准备一张行人行走的图片，例如：

<img src="walking-person.png" alt="Walking Person">

然后，我们可以使用CSS3动画来实现行人在街道上行走的效果。以下是一个示例代码：

<div class="street">
  <div class="person"></div>
</div>

.street {
  width: 100%;
  height: 300px;
  background-color: #ccc;
  position: relative;
  overflow: hidden;
}

.person {
  width: 50px;
  height: 100px;
  background-image: url(walking-person.png);
  background-size: 200%;
  background-position: 0 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  animation: walking 1s linear infinite;
}

@keyframes walking {
  0% {
    background-position: 0 0;
    transform: translateX(0);
  }
  25% {
    background-position: 0 -100px;
    transform: translateX(30px);
  }
  50% {
    background-position: 0 -200px;
    transform: translateX(60px);
  }
  75% {
    background-position: 0 -100px;
    transform: translateX(30px);
  }
  100% {
    background-position: 0 0;
    transform: translateX(0);
  }
}

我们首先创建一个 `.street` 容器，设置它的 `height` 和背景颜色。然后在容器内部创建一个 `.person` 元素，设置它的宽度、高度和背景图片，然后使用 `position: absolute` 定位在容器底部中央。

接着，我们使用 CSS3 动画 `@keyframes` 来实现行人行走的效果。我们通过改变背景位置和 `transform: translateX()` 属性来模拟行人在街道上行走的动作。最后，我们将动画应用到 `.person` 元素上，并设置为无限循环。

这样，我们就实现了一个简单的行人在街道上行走的动画效果。你可以根据自己的需要调整动画速度和行走路径。