菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
CSS3 animation实现gif动图的暂停和播放 <style> .love { display:block; width:100px; height:100px; background:url(/public/uploads/demo_source/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:200%; } } </style> HTML代码 <i id="testImg" class="love"></i> <p><input type="button" id="testBtn" value="暂停"></p> JS代码 <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>
运行结果