亚伦影音工作室 发表于 2024-12-20 18:47

汉字按钮播放器控制动画

本帖最后由 亚伦影音工作室 于 2024-12-20 18:47 编辑 <br /><br /><style>
#world{width:100px;height: 100px;position:relative ;font:normal 2em/4em 华文隶书;cursor: pointer;color: #000; text-align: center;}
#pic{position:relative ;
      top:30px; left:80px;background:#800 url('https://pic.imgdb.cn/item/675baa7ed0e0a243d4e34276.jpg')no-repeat -80px 0/cover;
      width: 300px; border-radius: 50%;
      height: 300px;animation:fadenum10slinear infinite;}
@keyframes fadenum { to { transform: rotate(2turn);} }
}
</style>
<divonclick="fn()"   id="world">暂停</div>
<div id="pic"></div>
<audio autoplay="" id="aud" loop="" src="https://s2.ananas.chaoxing.com/sv-w7/audio/31/5c/8e/c94454681bc93212751bc46d6cd20d50/audio.mp3"></audio>
<script>
function fn(){
          if(document.getElementById("world").innerHTML=="播放"){
                                aud.play();pic.style.animationPlayState = 'running';
                                document.getElementById("world").innerHTML="暂停";
                        }else{
                                aud.pause();pic.style.animationPlayState = 'paused';
                                document.getElementById("world").innerHTML="播放";
                        }
                }
</script>

杨帆 发表于 2024-12-20 20:14

顺畅，灵敏，实用，谢谢亚伦老师的汉字按钮播放器分享{:4_191:}

红影 发表于 2024-12-20 21:37

这个图图是从东篱闲人的帖子里截的吧。
漂亮的制作，欣赏亚伦好帖{:4_187:}

小辣椒 发表于 2024-12-20 22:19

亚伦最好做进一个帖里面去{:4_187:}

小辣椒 发表于 2024-12-20 22:20

亚伦现在也是越来越厉害了，欣赏精彩的制作
页: [1]
查看完整版本: 汉字按钮播放器控制动画