我已经尝试这样做几个小时了,但到目前为止我还没有取得任何进展。
我有一个网站,其中有一些动画,有些将在单击时激活,有些将在悬停时激活。与此网站中找到的动画类似的内容:http://www.pixelwrapped.com/猫尾部是有响应的,就像当你缩放浏览器时它也会随之缩放一样。
这是我用来创建动画的代码
.monster {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
.monster:hover {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
animation: play .9s steps(18);
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
我发现this使用百分比的教程,适用于更改 1 帧,而不是在本例中播放整个 18 帧,我还有其他由 30 多个 Sprite 组成的动画,我查看了 spritely.js但它没有反应。
有什么想法可以解决这个问题吗?
最佳答案
我终于知道怎么做了!以防万一有人仍然关心,让我做一些解释,这样你就不会经历我所经历的事情:
<style>
div.sprite {
margin: 0 auto;
width: 40%;
/* Change this to what ever value you desire*/
height: 0;
padding-bottom: 40%;
background-image: url("le-cloud-copy.png");
/* Add the sprite sheet here, must be on a staright line*/
background-position: 0 0;
background-size: 1800%;
/* I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
display: block;
}
div.sprite:hover {
/* background-position: 500% 0;*/
animation: play .9s steps(18);
/* 18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
}
@keyframes play {
100% {
background-position: 1800% 0;
}
}
</style>
神奇的一点是 here包含这个库,这应该可以工作。
<script src="js/prefixfree.min.js"></script>
关于javascript - 如何在 CSS 中创建响应式 Sprite 表动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26502600/