马黑黑 发表于 2022-1-19 20:43

旋转按钮（感谢风中飞尘的提醒）

<style type="text/css">
.btn-ro {
      width: 32px;
      height: 32px;
      line-height: 32px;
      background: linear-gradient(blue,gray,red);
      border-radius: 50%;
      outline:none;
      color: white;
      text-align: center;
      box-shadow: 1px 1px 2px #666;
      opacity: 1;
      cursor: pointer;
      animation: rol 5s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>


在 @风中飞尘 提醒下，做了一个旋转按钮，这个按钮先上效果，下一步将之与相关元素关联：


马黑黑 发表于 2022-1-19 20:44

本帖最后由 马黑黑 于 2022-1-19 20:47 编辑 <br /><br /><style type="text/css">
.btn-ro {
        width: 32px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(blue,gray,red);
        border-radius: 50%;
        outline:none;
        color: white;
        text-align: center;
        box-shadow: 1px 1px 2px #666;
        opacity: 1;
        cursor: pointer;
        animation: rol 5s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div class="btn-ro">●</div>

马黑黑 发表于 2022-1-19 20:50

html代码：

<div class="btn-ro">●</div>

红影 发表于 2022-1-19 22:19

这个按钮还是彩色的，有趣{:4_187:}

红影 发表于 2022-1-19 22:20

这个不是图片，完全是代码弄的，厉害{:4_199:}

马黑黑 发表于 2022-1-19 22:30

红影 发表于 2022-1-19 22:20
这个不是图片，完全是代码弄的，厉害

这个不同复杂

马黑黑 发表于 2022-1-19 22:40

<style type="text/css">
.btn-ro {
        width: 32px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(blue,gray,red);
        border-radius: 50%;
        outline:none;
        color: white;
        text-align: center;
        box-shadow: 1px 1px 2px #666;
        opacity: 1;
        cursor: pointer;
        animation: rol 5s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<p>看一下控制音乐的效果。音乐名称：山那边的菇凉（伴奏），不自动播放，不循环，便于观察按钮效果。预设目标1：通过按钮播放音乐，播放完毕按钮不旋转。预设目标2：若自动播放音乐，按钮理应旋转（本示范未预设自动播放，但JS代码有监测机制）。<br>&nbsp;</p>
<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/03/12/19103bf836a80e125c6670acacbd115a.mp3"></audio>
<div id="btn-ro" class="btn-ro">●</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>

红影 发表于 2022-1-20 09:34

马黑黑 发表于 2022-1-19 20:50
html代码：

●

这个大的点点是什么啊？

马黑黑 发表于 2022-1-20 10:34

红影 发表于 2022-1-20 09:34
这个大的点点是什么啊？

光盘的眼

红影 发表于 2022-1-20 12:10

马黑黑 发表于 2022-1-20 10:34
光盘的眼

哦哦，还以为还是命令。光盘上没看到这样的眼啊{:4_173:}

马黑黑 发表于 2022-1-20 12:33

红影 发表于 2022-1-20 12:10
哦哦，还以为还是命令。光盘上没看到这样的眼啊

一切创造离不开想象力。你看光盘按钮的最中间，像不像。〇和●都是标准字符，〇是汉字的〇，●是符号。我选后者是因为它是实心的，color可以给它完整上色

红影 发表于 2022-1-20 13:22

马黑黑 发表于 2022-1-20 12:33
一切创造离不开想象力。你看光盘按钮的最中间，像不像。〇和●都是标准字符，〇是汉字的〇，●是符号。我 ...

那么这个实心的点怎样设定它的大小呢？

马黑黑 发表于 2022-1-20 16:42

红影 发表于 2022-1-20 13:22
那么这个实心的点怎样设定它的大小呢？

它是文本，font-size不就可以了么

红影 发表于 2022-1-20 21:20

马黑黑 发表于 2022-1-20 16:42
它是文本，font-size不就可以了么

原来是这样解决的，聪明{:4_199:}

马黑黑 发表于 2022-1-20 21:21

红影 发表于 2022-1-20 21:20
原来是这样解决的，聪明

事在人为
页: [1]
查看完整版本: 旋转按钮（感谢风中飞尘的提醒）