|
|

楼主 |
发表于 2022-2-1 12:05
|
显示全部楼层
本帖最后由 绿叶清舟 于 2022-2-1 12:12 编辑
<style type="text/css">
/* 旋转按钮二 仿光盘 34*34
利用 borderr-color 着背景色
HTML代码:<div id="btn-ro" class="btn-ro"></div>
*/
.btn-ro {
width: 8px; height: 8px;
background: white;
border: 13px solid;
border-color: #B34D76 #EED2EE;
border-radius: 50%;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
cursor: pointer;
animation: rol linear 2s infinite;
}
.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<DIV align=center color=#ff0000 >
<table style="position: relative; LEFT: -280px; width:1200px;TOP: 180px" border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=1000 background=https://pic.imgdb.cn/item/61f8b10b2ab3f51d91845a79.gif>
</TD></TR><TR><TD height=1000 background=https://pic.imgdb.cn/item/61f8b1292ab3f51d9184745c.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<audio id="ymusic" src="https://sharefs.ali.kugou.com/202202011155/9b5814cee966c32802d94855fd87fb3d/KGTX/CLTX001/c1b5af4b2b0c4cbafd844897f199cd00.mp3" autoplay="autoplay" loop="loop"></audio>
<div style="position: relative; LEFT: -130px; TOP:-180px" class="btn-ro"></div>
<script>
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }
</script> |
|