HTML 是用來(lái)制作網(wǎng)站的基礎(chǔ)，可以實(shí)現(xiàn)各種不同的功能。如果想要在網(wǎng)站中添加動(dòng)畫(huà)，那么就可以使用 HTML 來(lái)實(shí)現(xiàn)人走動(dòng)的效果。下面我們來(lái)看一下如何使用 HTML 代碼來(lái)實(shí)現(xiàn)人走動(dòng)。
<!DOCTYPE html>
<html>
<head>
<title>人走動(dòng)</title>
<style>
.person {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-image: url('person.png');
background-size: contain;
animation: walk 1.5s infinite steps(6);
}
@keyframes walk {
0% {
background-position: 0 0;
}
100% {
background-position: -600px 0;
}
}
</style>
</head>
<body>
<div class="person"></div>
</body>
</html>我們通過(guò)定義類名 person 來(lái)設(shè)置人物的樣式，這里使用了背景圖片，通過(guò)設(shè)置 background-position 來(lái)控制圖片的位置。同時(shí)，我們還需要定義動(dòng)畫(huà)的樣式，通過(guò) animation 來(lái)實(shí)現(xiàn)人物走動(dòng)的效果。
通過(guò)以上代碼，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的人走動(dòng)的效果。如果希望效果更豐富，可以進(jìn)一步添加音效等。