Question

我正在尝试使用精灵表创建一个动画按钮。动画应该在悬停时播放，然后在mouseout上动画应该完成然后停止。

我该怎么做呢？我尝试设置div的背景并通过悬停事件控制背景位置。我可以获得正确设置背景的背景位置，但每次更改都非常快，它可能是即时的，因此动画不会显示自己。

任何建议都会有所帮助。经过大量的搜索没有运气，我不知道还有什么可以尝试。

谢谢！

Answer 1

最好的建议是使用CSS3 非常简单，不需要javascript：

看一下这个例子：

http://codeitdown.com/css-sprite-animations/

这里的例子：

http://jsfiddle.net/drukaman/ued7mLha/1/

Answer 2

来自Referance的

：https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

<强> HTML

<html>
    <head>
        <title>
            Sprite-Sheet Animation
        </title>
        <link rel=”stylesheet” type=”text/css” href=”main.css”>
    </head>
    <body>
        <div class=”animatedDiv”></div>
    </body>
</html>

<强> CSS

.animatedDiv {
    width: 820px;
    height: 312px;
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
    -webkit-animation: play 2s steps(48) infinite;
    -moz-animation: play 2s steps(48) infinite;
    -ms-animation: play 2s steps(48) infinite;
    -o-animation: play 2s steps(48) infinite;
    animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}

详细说明请参阅link。

如何使用Javascript创建带有Sprite表的动画按钮？

2 个答案: