|
|
楼主 |
发表于 2022-1-28 21:11
|
显示全部楼层
<style type="text/css">
.btn-ro {
width: 8px; height: 8px;
background: white;
border: 13px solid;
border-color: #000000 #888888;
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>
<!-- 帖子 html 代码开始，暗绿色代码中的div是你的帖子容器，代码不一定是酱紫的，我只是举例 -->
<div styl="position:relative;left:-304px;top:80px;width:1024px;">
<!-- 你的帖子内容 -->
<!--按钮HTML代码应放于帖子内容某处，位置如果不合适可通过 style="position:relative;..." 定位 -->
</div>
<!-- audio播放器可放在帖子代码的最后一行 -->
<audio id="ymusic" src="音乐地址" autoplay="autoplay" loop="loop"></audio>
<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> |
|
楼主: 绿叶清舟
发表于 2022-1-28 12:21
显身卡
