首页 > 代码库 > 跑步动画
跑步动画
需要一张如下要求的图片（背景为透明色）
<title>跑步动画</title>
<style type="text/css">
.box{
width: 360px;
height: 360px;
position: relative;
margin: 100px auto;
}
.person{
width: 180px;
height: 300px;
background: url(‘charector.png‘);
position: absolute;
animation-name: person;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: step-start;
}
@keyframes person {
0%{
background-position: 0 0;
}
14.3%{
background-position: -180px 0;
}
28.6%{
background-position: -360px 0;
}
42.9%{
background-position: -540px 0;
}
57.2%{
background-position: -720px 0;
}
71.5%{
background-position: -900px 0;
}
85.8%{
background-position: -1080px 0;
}
100%{
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="box">
<div class="person"></div>
</div>
</body>
跑步动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。