css3的animation-play-state属性实现GIF图的暂停与播放

来源：互联网发布：win7仿苹果mac os x 编辑：程序博客网时间：2024/05/14 15:26

.firework  {    display: block;    width: 100px; height: 100px;    background: url(web_firework_animation.png) 0 0 no-repeat;    background-size: 200%;    animation: heart-burst steps(28) 0.9s infinite both;}.stop {    animation-play-state: paused;}@keyframes heart-burst {  0% {    background-position: 0%;  }  100% {    background-position: 100%;  }}

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 = '暂停';        }    };}

<i id="testImg" class="firework "></i><p><input type="button" id="testBtn" value="暂停"></p>

阅读全文

0 0