本文目錄導(dǎo)讀：

1. 準(zhǔn)備HTML結(jié)構(gòu)
2. 添加CSS樣式
3. 效果展示

CSS3實現(xiàn)行走的人

CSS3是一種強(qiáng)大的樣式表語言，可以用來制作各種動態(tài)和靜態(tài)的網(wǎng)頁元素，實現(xiàn)行走的人是一個很有趣的應(yīng)用，下面，我們將介紹如何用CSS3來實現(xiàn)行走的人。

準(zhǔn)備HTML結(jié)構(gòu)

我們需要準(zhǔn)備一個HTML結(jié)構(gòu)來承載行走的人，可以是一個div元素，里面包含兩個子元素，分別代表人的身體和腿。

<div class="walking-person">
  <div class="body"></div>
  <div class="legs"></div>
</div>

添加CSS樣式

我們需要添加一些CSS樣式來定義行走的人的外觀和行為，可以設(shè)置一些基本的樣式，如顏色、背景等，可以使用CSS動畫來實現(xiàn)行走的效果。

.walking-person {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #333;
  border-radius: 50%;
}
.body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #333;
  border-radius: 50%;
}
.legs {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 100px;
  background-color: #333;
}
@keyframes walk {
  0% { transform: translateY(0); }
  50% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}
.walking-person {
  animation: walk 2s infinite;
}

在上面的代碼中，我們定義了一個名為“walk”的動畫，它會使行走的人上下移動，我們將這個動畫應(yīng)用到行走的人上，并設(shè)置動畫的持續(xù)時間為2秒，且會無限次重復(fù)。

效果展示

我們可以在瀏覽器中查看效果，在上面的代碼中，我們定義了一個黑色的圓形代表人的身體，以及兩個細(xì)長的條形代表人的腿，通過CSS動畫，我們可以使人的身體上下移動，從而實現(xiàn)行走的效果。