酷酷的腰带扣
<style>#papa { --state: paused; --delay: 0s; margin: auto; width: 720px; height: 983px; background: url('https://638183.freep.cn/638183/t23/webp/vk.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/btn/star.png'); animation: flash 1s var(--delay) infinite alternate var(--state); }
#papa::after { right: 0; --delay: .5s; }
#mplayer { --play: 1; --pause: 0; --bd: snow; position: absolute; top: 418px; left: 358px; width: 30px; height: 30px; border-radius: 50%; transition: .7s; cursor: pointer; display: grid; place-items: center; }
#mplayer::before, #mplayer::after {position: absolute;content: '';border-style: solid;border-color: var(--bd);transition: .4s;}
#mplayer::before { width: 0; height: 0; left: 10px; border-width: 8px 10px; border-color: transparent transparent transparent var(--bd); opacity: var(--play); }
#mplayer::after { width: 2px; height: 12px; border-width: 0 4px 0 4px; opacity: var(--pause); }
#mplayer:hover { --bd: gold; }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0; transform: rotate(5deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1830781603" loop autoplay></audio>
<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--play', '1'), mplayer.style.setProperty('--pause', '0'), papa.style.setProperty('--state','paused')) : (mplayer.style.setProperty('--play', '0'),mplayer.style.setProperty('--pause', '1'),papa.style.setProperty('--state','running'));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script>
哈哈，有趣，把播放器按钮做成了腰带扣啊，还是心形的呢，漂亮{:4_187:} 暂停音乐要点人家美女肚脐下方，黑黑这做法对美女有点亵渎哦{:4_170:} 不过点上去的手感很不错{:4_189:} 红影 发表于 2023-3-28 10:41
哈哈，有趣，把播放器按钮做成了腰带扣啊，还是心形的呢，漂亮
东篱同款{:4_170:} 红影 发表于 2023-3-28 10:42
暂停音乐要点人家美女肚脐下方，黑黑这做法对美女有点亵渎哦
{:4_172:} 红影 发表于 2023-3-28 10:42
不过点上去的手感很不错
忍不住了吧{:4_173:} 嘿！这个播放器放的位置可真逗。{:4_189:} 很有趣，不好意思点了人家肚脐！ 亚伦影音工作室 发表于 2023-3-28 16:27
很有趣，不好意思点了人家肚脐！
{:4_172:} 梦油 发表于 2023-3-28 15:15
嘿！这个播放器放的位置可真逗。
挺好玩的吧{:4_170:} 马黑黑 发表于 2023-3-28 17:11
挺好玩的吧
挺好，很吸引眼球。 梦油 发表于 2023-3-28 17:22
挺好，很吸引眼球。
{:4_196:} 马黑黑 发表于 2023-3-28 12:05
东篱同款
这美女很酷，腰带扣更酷{:4_173:} 马黑黑 发表于 2023-3-28 12:05
黑黑这是不安好心{:4_173:} 马黑黑 发表于 2023-3-28 12:06
忍不住了吧
有摸白不摸{:4_170:} 红影 发表于 2023-3-28 20:38
有摸白不摸
{:4_189:} 红影 发表于 2023-3-28 20:37
黑黑这是不安好心
没呀，怎么可能 红影 发表于 2023-3-28 20:37
这美女很酷，腰带扣更酷
和东篱的有得一比 这个好玩，看起来后面黑黑会有一些趣味性的东东出来，{:4_199:}