<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pic {
/*宽和高与精灵图的单个图片的宽高一致*/
width: 126px;
height: 180px;
background-image: url("img/animation_pic2.jpg");
margin-left: 1000px;
/*数字七和小人图个数一致 infinite重复*/
animation:
move 2s steps(7) infinite,
box_move 30s forwards;
}
/*精灵图 移动*/
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -882px 0;
}
}
/*盒子移动 如何让小人跑远一点 ， 改变盒子位置 translate position*/
@keyframes box_move {
from {
transform: translateX(0);
}
to {
transform: translateX(-800px);
}
}
</style>
</head>
<body>
<!--精灵图：准备显示区域 准备动画 使用动画-->
<div class="pic">
</div>
</body>
</html>
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
