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

马黑黑

<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>


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

马黑黑

●

马黑黑

html代码：

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

红影

这个按钮还是彩色的，有趣

红影

这个不是图片，完全是代码弄的，厉害

马黑黑

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

这个不同复杂

马黑黑

看一下控制音乐的效果。音乐名称：山那边的菇凉（伴奏），不自动播放，不循环，便于观察按钮效果。预设目标1：通过按钮播放音乐，播放完毕按钮不旋转。预设目标2：若自动播放音乐，按钮理应旋转（本示范未预设自动播放，但JS代码有监测机制）。
 

●

红影

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

●

这个大的点点是什么啊？

马黑黑

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

光盘的眼

红影

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

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

马黑黑

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

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

红影

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

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

马黑黑

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

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

红影

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

原来是这样解决的，聪明

马黑黑

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

事在人为