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

红影

马黑黑 发表于 2022-1-20 10:32
一生二二生三吗，有了实现原理，你在此基础上也能琢磨出另一套的

只有你这样对代码纯熟的人才可能琢磨得出来，我是肯定不行的。

红影

马黑黑 发表于 2022-1-20 10:33
其实也都一样的，只是外观不同

第一种的渐变好美。第二种也可以多加几种颜色的么？

樵歌

马黑黑 发表于 2022-1-20 10:41
这几天补休，因疫情严峻，不能出去玩，就在家玩玩代码呗

太厉害了太霸道了，太太了。

马黑黑

红影 发表于 2022-1-20 12:58
第一种的渐变好美。第二种也可以多加几种颜色的么？

最多四种

马黑黑

樵歌 发表于 2022-1-20 13:41
太厉害了太霸道了，太太了。

太太在家

马黑黑

红影 发表于 2022-1-20 12:58
第一种的渐变好美。第二种也可以多加几种颜色的么？

边框四种颜色的加法跟数值顺序是一样的吧

马黑黑

红影 发表于 2022-1-20 12:57
只有你这样对代码纯熟的人才可能琢磨得出来，我是肯定不行的。

学会了都行

马黑黑

红影 发表于 2022-1-20 12:55
黑黑不介意就好，我还是喜欢自动播放，就保持自己小小的喜欢了

这个没有规定的，只是一种习惯

马黑黑

红影 发表于 2022-1-20 12:53
哈哈，小的反倒贵啊

小而美

加林森

@马黑黑


<div styl="position:relative;left:-304px;top:80px;width:1024px;">
<style type="text/css">
<div id="btn-ro"style="position:relative;..."＜ img src="https://pic.imgdb.cn/item/61e92a5f2ab3f51d915a28f9.jpg"＞ 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>

<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>
<script>
<audio id="ymusic" style="position:relative;..."   src="https://www.80wp.com/wj/3015611/bf3135f0ebe9a8faf39f2b849b1025d3.mp3" autoplay="autoplay" loop="loop"></audio></div>
</script>

加林森

老黑你帮我看看是哪里出问题了？

马黑黑

加林森 发表于 2022-1-20 17:38
老黑你帮我看看是哪里出问题了？

代码杂乱。你看下我重新整理的（红色部分是帖子HTML代码）:
<style>
.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>

<img style="position:relative; left:-200px;" src="https://pic.imgdb.cn/item/61e92a5f2ab3f51d915a28f9.jpg" />
<div id="btn-ro" class="btn-ro" style="position:relative;top:-60px;left:100px;">●</div>
<audio id="ymusic" src="https://www.80wp.com/wj/3015611/bf3135f0ebe9a8faf39f2b849b1025d3.mp3" 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>
<script>

马黑黑

加林森 发表于 2022-1-20 17:38
@马黑黑

以后按 32 楼这样组织代码，先 CSS，接着HTML，后面才是JS

加林森

马黑黑 发表于 2022-1-20 19:30
以后按 32 楼这样组织代码，先 CSS，接着HTML，后面才是JS

好的好的。谢谢老黑！

红影

马黑黑 发表于 2022-1-20 16:50
学会了都行

我离学会还差了老远呢

红影

马黑黑 发表于 2022-1-20 16:50
这个没有规定的，只是一种习惯

没规定就好，那我也心安理得了。

红影

加林森 发表于 2022-1-20 17:38
老黑你帮我看看是哪里出问题了？

最后的那一段<script></script>应该是不需要吧，音乐是用HTML加的啊，不是用JS加的

加林森

红影 发表于 2022-1-20 20:50
最后的那一段应该是不需要吧，音乐是用HTML加的啊，不是用JS加的

你帮忙给删了吧

红影

完了，35楼也让这个帖子歪了，现在39，我再空发两个帖子翻页吧

红影

好了，现在可以翻页了。