我在网上找到了一段动画代码,当我点击图像时,它会重新播放动画。 我想做的是,当我点击图像时,它将播放动画并停止,再次点击它应该重新设置图像。 请问有人可以告诉我如何实现吗?
.like-btn-svg {
width: 80px;
height: 100px;
position: absolute;
left: 25px;
bottom: -112px;
transform: translate(-50%, -50%);
background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
background-position: 0 0;
animation: fave-like-btn-svg 1s steps(28);
cursor: pointer;
}
.like-btn-svg:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
@keyframes fave-like-btn-svg {
0% {
background-position: 2800px 0;
}
100% {
background-position: -2800px 0;
}
}
<div class="like-btn-svg"></div>