animation css
<html> <head> <style> .love { display: block; width: 100px; height: 100px; background: url(web_heart_animation.png) 0 0 no-repeat; background-size: 2900%; animation: heart-burst steps(28) 0.8s infinite both; } .stop { animation-play-state: paused; } @keyframes heart-burst { 0% { background-position: 0%; } 100% { background-position: 100%; } } </style> </head> <body> <i id="testImg" class="love"></i> <p> <input type="button" id="testBtn" value="暂停"> </p> <script> var image = document.getElementById("testImg"), button = document.getElementById("testBtn"); if (image.classList && image && button) { button.onclick = function () { if (this.value == '暂停') { image.classList.add('stop'); this.value = '播放'; } else { image.classList.remove('stop'); this.value = '暂停'; } }; } </script> </body> </html>
代码实现来源于 记忆是条狗
