亚伦影音工作室 发表于 2025-1-29 11:02

自创svg简易小播按钮

本帖最后由 亚伦影音工作室 于 2025-1-30 03:28 编辑 <br /><br /><style>
#bnt{margin: 40px 40px ; width: 40px;height: 40px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 100%; height: 100%;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; opacity:0;align-items: center; }
</style>
<div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#800000" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#800000" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1') : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0');
</script >

梦油 发表于 2025-1-29 11:30

我给你拜年啦！

红影 发表于 2025-1-29 12:08

这小播清清爽爽，很漂亮。
欣赏亚伦老师好帖{:4_199:}

庶民 发表于 2025-1-29 13:24

https://pic1.imgdb.cn/item/679831abd0e0a243d4f83f3a.gifhttps://pic1.imgdb.cn/item/679831abd0e0a243d4f83f3a.gif
页: [1]
查看完整版本: 自创svg简易小播按钮