马黑黑 发表于 2022-4-15 21:13

再整个audio控制按钮

<style type="text/css">
/* 音乐控制按钮 */
.btn {
        width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
        filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素 按钮修饰 */
.btn::before {
        content: ''; position: absolute; width: 100%; height: 100%;
        background: #ffcc00 radial-gradient(circle at 35% 40%,rgba(255,255,255,.6), rgba(0,0,255,.15));
        border-radius:50%; opacity: .25;
}
</style>

<div class="btn"></div>

<script language="javascript">
let flag = true;//true = 自动播放; false = 手动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/15/045fe77167d432057f862ef2a2b5b416.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
bgChange();
btn.onclick = function() {
        flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
                let c1 = `#${Math.random().toString(16).substr(-6)}`;
                let c2 = `#${Math.random().toString(16).substr(-6)}`;
                btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>

马黑黑 发表于 2022-4-15 21:14

代码：
<style type="text/css">
/* 音乐控制按钮 */
.btn {
        width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
        filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素 按钮修饰 */
.btn::before {
        content: ''; position: absolute; width: 100%; height: 100%;
        background: #ffcc00 radial-gradient(circle at 35% 40%,rgba(255,255,255,.6), rgba(0,0,255,.15));
        border-radius:50%; opacity: .25;
}
</style>

<div class="btn"></div>

<script language="javascript">
let flag = true;//true = 自动播放; false = 手动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/15/045fe77167d432057f862ef2a2b5b416.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
bgChange();
btn.onclick = function() {
        flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
                let c1 = `#${Math.random().toString(16).substr(-6)}`;
                let c2 = `#${Math.random().toString(16).substr(-6)}`;
                btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>

马黑黑 发表于 2022-4-15 21:15

控制播放按钮的位置可以调整 .btn 选择器的 left 和 top 值：

/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}

马黑黑 发表于 2022-4-15 21:15

按钮大小可自定义：

/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}

加林森 发表于 2022-4-15 22:04

跟到学习

马黑黑 发表于 2022-4-15 22:13

加林森 发表于 2022-4-15 22:04
跟到学习

{:4_190:}

加林森 发表于 2022-4-15 22:17

马黑黑 发表于 2022-4-15 22:13


谢谢老黑。{:4_191:}你喝！

红影 发表于 2022-4-15 23:36

真漂亮，变色按钮{:4_199:}

马黑黑 发表于 2022-4-16 08:43

红影 发表于 2022-4-15 23:36
真漂亮，变色按钮

还行的吧

红影 发表于 2022-4-18 14:15

马黑黑 发表于 2022-4-16 08:43
还行的吧

很梦幻，美的化身{:4_187:}

马黑黑 发表于 2022-4-18 19:24

红影 发表于 2022-4-18 14:15
很梦幻，美的化身

看样子变化着的东东就是有吸引力

红影 发表于 2022-4-19 16:35

马黑黑 发表于 2022-4-18 19:24
看样子变化着的东东就是有吸引力

反正你什么都能变出来{:4_173:}

马黑黑 发表于 2022-4-19 18:10

红影 发表于 2022-4-19 16:35
反正你什么都能变出来

有空有时间有心情时可是试一试

红影 发表于 2022-4-20 18:50

马黑黑 发表于 2022-4-19 18:10
有空有时间有心情时可是试一试

我试了另一个按钮，一会发出来。

马黑黑 发表于 2022-4-20 18:57

红影 发表于 2022-4-20 18:50
我试了另一个按钮，一会发出来。

期待ing

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

马黑黑 发表于 2022-4-20 18:57
期待ing

发出来了。我把按钮调了一下颜色，不过没你的颜色设计好{:4_173:}

马黑黑 发表于 2022-4-20 20:45

红影 发表于 2022-4-20 20:21
发出来了。我把按钮调了一下颜色，不过没你的颜色设计好

根据整体设计好，你的帖子很优秀的
页: [1]
查看完整版本: 再整个audio控制按钮