如何在css中创建响应精灵表动画

How to create a responsive sprite sheet animation in css?

本文关键字：响应 精灵 动画 创建 css      更新时间：2023-09-26

我已经尝试了几个小时，但到目前为止我还没有取得任何进展。

我有一个网站，里面有一些动画，有些会在点击时激活，有些会悬停。类似于这个网站上的动画：http://www.pixelwrapped.com/猫的尾巴是膨胀的，就像当你缩放broswer时，它也会随之缩放。

这是我用来创建动画的代码

.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%;
        }

我发现了这个教程，它使用百分比，适用于更改1帧，而不是在这个例子中播放整个18帧，我有其他由30多个精灵组成的动画，我查看了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>

神奇的地方就在这里，包括这个库，这应该会起作用。

<script src="js/prefixfree.min.js"></script>
相关文章：