我写了这段代码:
body {
background: #24aecd;
}
#monster {
width: 190px;
height: 290px;
margin: 2% auto;
background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
animation: play .8s steps(10) infinite;
}
@keyframes play {
100% {
background-position: -1900px;
}
}<head>
<title>Page Title</title>
</head>
<body>
<div id="monster"></div>
</body>它工作正常但是当我改变背景位置时它不能正常工作。
Can anyone explain how to set background-position value in different sprit sheets.
怎么可能
最佳答案
“但是当我改变背景位置时它不能正常工作。” -- play 关键帧中的 background-position 在您的情况下不应更改，值 1900px 恰好是背景图像的宽度。这是整个动画的解释:
- 动画由一张大背景图片 (http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png) 实现。如果您下载并打开这张图片，它由 10 张独立的小图片(水平)组成，每张图片构成动画中的 1 帧。
- 默认情况下，显示最左边的帧图像(
#monster的background属性中的left)。 - 定义一个动画，使用10帧和0.8s周期，无限播放。动画的效果是将背景图片向左移动，每一步移动一帧图像(-1900px/10 = -190px，190px是一帧图像的宽度)。显示所有 10 帧图像后，
background-position将为 -1900px(100%在关键帧中)并且随着背景图像的重复，新一轮将开始。
background-repeat-x 这个动画是必须的，否则不能无限动画。但是，background-repeat-y 应该是 no-repeat 以获得更好的效果。
如果要改变动画背景图片，改变相应的background-position，可以应用类似的计算——分帧，合成一张图片，设置100%关键帧作为合成图片的负宽度，最后定义CSS动画。
更新:
对于评论中提到的示例 Sprite 图像，其宽度为612px，由6帧组成，因此一帧的宽度为102px。代码片段将是:
#monster {
width: 102px;
height: 200px;
margin: 0 auto;
background: url('https://lh3.googleusercontent.com/proxy/hCmcllpdGXPzzIkEQxUf8EEkl2Tc9WqLu4D9JIAbPtmLpb5Fx0H7DG2yojnZ-rRNt8XXsM-xBGEWrPijzLnVZUpZbAnWTNui9TLjwdzm2R_PFdwwhVh0jV0=w612-h148-nc') left center;
animation: play .8s steps(6) infinite;
background-repeat-y: no-repeat;
}
@keyframes play {
100% {
background-position: -612px;
}
}<div id="monster"></div>关于html - 如何在 Sprite 表动画中设置背景位置值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43731287/