如何使用Javascript使用Sprite Sheet創建動畫按鈕？

Question

我正在嘗試使用精靈表創建一個動畫按鈕。 動畫應懸停播放，然后在鼠標移出時動畫應結束然后停止。

我該怎么做呢？ 我嘗試設置div的背景並通過懸停事件控制背景位置。 我可以正確設置背景位置，但是每次更改都進行得如此之快，以至於它可能是即時的，因此動畫無法顯示。

任何的意見都將會有幫助。 經過大量搜索，沒有運氣，我不確定還有什么嘗試。

謝謝！

Answer 1

最好的建議是使用CSS3。
非常簡單，不需要javascript：

看一下這個例子：

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

這里的例子：

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

Answer 2

從參考中： 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;
    }
}

有關詳細說明，請單擊鏈接。

如何使用Javascript使用Sprite Sheet創建動畫按鈕？

問題描述

2 個解決方案

解決方案1
3 已采納 2015-03-25 08:07:36

解決方案2
1 2015-06-04 05:22:20

如何使用Javascript使用Sprite Sheet創建動畫按鈕？

問題描述

2 個解決方案

解決方案1 3 已采納 2015-03-25 08:07:36

解決方案2 1 2015-06-04 05:22:20

解決方案1
3 已采納 2015-03-25 08:07:36

解決方案2
1 2015-06-04 05:22:20