分享两个旋转按钮定稿版（附JS控制脚本）

马黑黑 · 发表于 2022-1-20 08:26

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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>



<div styl="position:relative;left:-304px;top:80px;width:1024px;">
      
      
</div>


<audio id="ymusic" src="音乐地址" autoplay="autoplay" loop="loop"></audio>

<script>
//JS代码放在帖子所有内容之后
//你也可以在此处加入你的JS代码
</script>