如何使用Javascript使用Sprite Sheet创建动画按钮？
[英]How can I create an Animated Button with a Sprite Sheet using Javascript?
问题描述
I am trying to create an animated button using a sprite sheet. 
我正在尝试使用精灵表创建一个动画按钮。 The animation should play on hover and then on mouseout the animation should finish and then stop. 动画应悬停播放，然后在鼠标移出时动画应结束然后停止。
How can I go about doing this? 我该怎么做呢？ I have tried setting the background of a div and controlling the background position through hover events. 我尝试设置div的背景并通过悬停事件控制背景位置。 I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself. 我可以正确设置背景位置，但是每次更改都进行得如此之快，以至于它可能是即时的，因此动画无法显示。
Any suggestions would be helpful. 任何的意见都将会有帮助。 After a lot of searching with no luck I am not sure what else to try. 经过大量搜索，没有运气，我不确定还有什么尝试。
Thank You! 谢谢！
2 个解决方案
解决方案1
3 已采纳 2015-03-25 08:07:36
the best advice would be to use a CSS3. 最好的建议是使用CSS3。
pretty easy no need for javascript: 非常简单，不需要javascript：
take a look at this for example: 看一下这个例子：
http://codeitdown.com/css-sprite-animations/
example here: 这里的例子：
http://jsfiddle.net/drukaman/ued7mLha/1/
解决方案2
1 2015-06-04 05:22:20
from the Referance : https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb 从参考中： https ：//medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
HTML 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 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;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.