马黑黑 发表于 2022-1-20 10:32
一生二二生三吗，有了实现原理，你在此基础上也能琢磨出另一套的
只有你这样对代码纯熟的人才可能琢磨得出来，我是肯定不行的。
马黑黑 发表于 2022-1-20 10:33
其实也都一样的，只是外观不同
第一种的渐变好美。第二种也可以多加几种颜色的么？
马黑黑 发表于 2022-1-20 10:41
这几天补休，因疫情严峻，不能出去玩，就在家玩玩代码呗
太厉害了太霸道了，太太了。{:4_189:}
红影 发表于 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
好的好的。谢谢老黑！{:4_191:}
马黑黑 发表于 2022-1-20 16:50
学会了都行
我离学会还差了老远呢{:4_173:}
马黑黑 发表于 2022-1-20 16:50
这个没有规定的，只是一种习惯
没规定就好，那我也心安理得了。
加林森 发表于 2022-1-20 17:38
老黑你帮我看看是哪里出问题了？
最后的那一段<script></script>应该是不需要吧，音乐是用HTML加的啊，不是用JS加的
红影 发表于 2022-1-20 20:50
最后的那一段应该是不需要吧，音乐是用HTML加的啊，不是用JS加的
你帮忙给删了吧
完了，35楼也让这个帖子歪了，现在39，我再空发两个帖子翻页吧
好了，现在可以翻页了。