朵拉 发表于 2022-5-3 22:26

学习按钮02（马黑黑原创）

本帖最后由 朵拉 于 2022-5-3 22:32 编辑 <br /><br /><style type="text/css">
/* 音乐控制按钮 */
.btn {
      width: 50px; height: 50px; left: 230px; top: 410px; 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/05/03/085a1221b08972d2900bc4b828d09f47.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>


https://tuchuangs.com/imgs/2022/05/03/547ca2ceaaf493de.jpg

加林森 发表于 2022-5-3 22:36

朵拉厉害,真漂亮！{:4_178:}！

朵拉 发表于 2022-5-3 22:36

@马黑黑 马老师，看过来 请指点{:4_190:}

朵拉 发表于 2022-5-3 22:38

加林森 发表于 2022-5-3 22:36
朵拉厉害,真漂亮！！

谢谢森队，节日快乐{:4_190:}

马黑黑 发表于 2022-5-3 23:10

很雅致

红影 发表于 2022-5-3 23:48

漂亮，用在这个图图里很炫的。欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2022-5-4 07:39

说唱乐挺有魅力的

加林森 发表于 2022-5-4 08:24

朵拉 发表于 2022-5-3 22:38
谢谢森队，节日快乐

漂亮的制作。节日快乐！
页: [1]
查看完整版本: 学习按钮02（马黑黑原创）