亚伦影音工作室 发表于 2024-12-21 10:38

二合一

本帖最后由 亚伦影音工作室 于 2024-12-21 11:56 编辑 <br /><br /><style>
#bfq{width:300px;top:30px; left:50px;height: 300px;position:relative}
#world{width:300px; left:0px;height: 300px;position:absolute;font:600 2em/10em 宋体;cursor: pointer;text-align: center;border-radius: 50%;color:#fff;z-index:1;}
#pic{position: absolute;
      top:0px; left:0px;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>
<div id="bfq" >
<div    onclick="fn()"   id="world">暂停</div>
<div id="pic" ></div>
</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-21 11:40

这样一整合，自然、美观、便捷，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2024-12-21 12:00

把文字整合到旋转播放器按钮中了，漂亮。
欣赏亚伦老师好帖{:4_187:}

世外桃源 发表于 2024-12-21 13:02

欣赏欣赏

世外桃源 发表于 2024-12-21 13:03

感谢分享
页: [1]
查看完整版本: 二合一