分享两个旋转按钮定稿版（附JS控制脚本）
本帖最后由 马黑黑 于 2022-1-20 08:32 编辑第一个：
<style type="text/css">
/* 旋转按钮一 仿光盘 32*32
利用背景色渐变+●模拟效果
HTML代码：<div id="btn-ro" class="btn-ro">●</div>
*/
.btn-ro {
width: 32px; height: 32px;
line-height: 32px; font-size: 12px;
background: linear-gradient(blue,gray,red);
outline:none;
color: white;
border-radius: 50%;
text-align: center;
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>
第二个：
<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: orange green;
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>
附：JS控制脚本（可分别配套两组CSS代码）
<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>
最后简单说说使用方法（红色部分请特别留意）：
帖子代码结构为 CSS + HTML + JS，例如：
<style type="text/css">
/* 按钮CSS代码 */
/* 你的CSS代码 */
</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>
//JS代码放在帖子所有内容之后
//你也可以在此处加入你的JS代码
</script>
@加林森 队长 黑黑好厉害，不但能琢磨出全代码的旋转光盘，而且一下子就琢磨出2个来，很赞{:4_199:} 第一个已经看到实例演示，我来试试第二种方法。
<style type="text/css">
.btn-ro {
width: 14px; height: 14px;
background: LightCyan;
border: 24px solid;
border-color: PowDerBlue LightBLue;
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 id="btn-ro" class="btn-ro">
<div styl="position:relative;left:200px;top:80px;">
<audio id="ymusic" src="https://www.80wp.com/wj/47875/dc513c8f68b6c24b4a286e90ca1b1dfd.mp3" autoplay="autoplay" loop="loop"></audio></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> 把光盘放大了一点，反正大小都是一个价，大的看得清楚点{:4_173:} 我喜欢用自动的，可以直接看效果。所以还是用了自动播放，不好意思啊{:4_173:} 红影 发表于 2022-1-20 09:44
把光盘放大了一点，反正大小都是一个价，大的看得清楚点
大的五毛，小的八毛 红影 发表于 2022-1-20 09:49
我喜欢用自动的，可以直接看效果。所以还是用了自动播放，不好意思啊
不论的，我之前只是说说，说说也就算了 红影 发表于 2022-1-20 09:41
黑黑好厉害，不但能琢磨出全代码的旋转光盘，而且一下子就琢磨出2个来，很赞
一生二二生三吗，有了实现原理，你在此基础上也能琢磨出另一套的 红影 发表于 2022-1-20 09:42
第一个已经看到实例演示，我来试试第二种方法。
其实也都一样的，只是外观不同 小黑创意无限呵。 樵歌 发表于 2022-1-20 10:38
小黑创意无限呵。
这几天补休，因疫情严峻，不能出去玩，就在家玩玩代码呗 好厉害的老黑。{:4_199:}
有空我也去制作一个出来玩玩。 加林森 发表于 2022-1-20 11:34
好厉害的老黑。
有空我也去制作一个出来玩玩。
支持 马黑黑 发表于 2022-1-20 11:55
支持
嗯嗯，下午来制作。 加林森 发表于 2022-1-20 12:00
嗯嗯，下午来制作。
期待 马黑黑 发表于 2022-1-20 12:06
期待
嗯嗯 马黑黑 发表于 2022-1-20 10:31
大的五毛，小的八毛
哈哈，小的反倒贵啊{:4_173:} 马黑黑 发表于 2022-1-20 10:31
不论的，我之前只是说说，说说也就算了
黑黑不介意就好，我还是喜欢自动播放，就保持自己小小的喜欢了{:4_173:}