公益社会游戏美食历史探索知识宠物动漫星座司法女性
首页/知识/正文

使用CSS3 animation实现gif动图的暂停和播放实例页面

软文 互联网 317阅读0评论2020-04-29 20:48
使用CSS3 animation实现gif动图的暂停和播放实例页面
回到相关文章 »
代码:
CSS代码:
.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%;
  }
}
HTML代码:
<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>
JS代码:
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 = '暂停';
        }
    };
}
效果:
暂停
声明:文章信息来源于互联网,如有侵权请及时联系(邮箱:haownews@sina.com),把连接发到邮箱里,我们会马上处理。
相关推荐
Copyright 2000-2030 All Rights Reserved 好云资讯网 www.haownews.com 版权所有 浙ICP备14021830号-11