css3动画行走的小人案例
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css3动画行走的小人案例以下是一个简单的CSS3动画行走的小人案例：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=""> </head>
<body>
<div id="walk"></div>
</body>
</html>
```
CSS代码（）：
```css
walk {
width: 47px;
height: 175px;
border: 1px solid black;
margin: 250px auto;
background: url(img/);
animation: walk 1s steps(5) infinite;
}
keyframes walk {
from {
background-position: 0px;
}
to {
background-position: 520px;
}
}
```
在这个案例中，我们使用了一个`div`元素来代表行走的小人。
通过设置
`width`、`height`、`border`等属性，我们可以定义小人的外观。
然后，我
们使用CSS的`background`属性来设置背景图片，并使用`animation`属性来创建动画效果。
通过设置`steps(5)`，我们将动画分为5个步骤，从而实现行走的效果。
最后，我们使用`infinite`关键字来使动画无限循环。