Ancient Voices

马黑黑

马黑黑

帖子代码

<style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/acvoices.webp') no-repeat center/cover; box-shadow: 3px 3px 6px #333; z-index: 1; display: grid; place-items: center; position: relative; --rad: 80px; }
#player { position: absolute; left: 100px; top: 60px; width: 100px; height: 100px; background: white; border-radius: 50%; box-shadow: inset 0 0 50px #7cb6a0a0, 0 0 var(--rad) white; cursor: pointer; transition: 0.2s; }
#psvg { position: absolute; width: 500px; height: 500px; filter: drop-shadow(100px 0 10px white) drop-shadow(-100px 0 6px white); transition: 0.75s;  }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=23969998" autoplay loop></audio>
	<img id="psvg" alt="" src="https://638183.freep.cn/638183/web/svg/balls2.svg" />
	<div id="player" title="播放/暂停"></div>	
</div>

<script>
aud.ontimeupdate = () => mydiv.style.setProperty('--rad', Math.random() * 100 + 50 + 'px');
player.onclick = () => aud.paused ? (aud.play(), psvg.style.opacity="1") : (aud.pause(), psvg.style.opacity="0");
</script>

马黑黑

音乐来自自然音乐大师—Dan Gibson的Shimmer专辑

马黑黑

测试：追加全屏按钮

梦江南

祝黑黑老师中秋节快乐，阖家幸福安康！

红影

这个聪明，用opacity的变化来暂停svg动态

红影

svg动图还带两个方向的阴影呢，更漂亮了。
小播是纯代码的月亮，设计得也很漂亮

红影

背景有珠珠，效果也是散发的珠珠。很有想象的设计。
音乐好听

马黑黑

红影 发表于 2024-9-17 10:30
背景有珠珠，效果也是散发的珠珠。很有想象的设计。
音乐好听

感谢支持

红影

马黑黑 发表于 2024-9-17 11:40
感谢支持

我是来学习的啊，先支持再使劲学习

马黑黑

红影 发表于 2024-9-17 10:19
这个聪明，用opacity的变化来暂停svg动态

除了用透明度隐藏，还可以使用 display：

元素.style.display = 'none'; //不可见
元素.style.display = 'inline-block'; //可见

block、inline-block都是可见，block 是块状元素，svg、canvas则属于行内块状元素，span属于 inline 类别的元素。

马黑黑

红影 发表于 2024-9-17 11:43
我是来学习的啊，先支持再使劲学习

红影

马黑黑 发表于 2024-9-17 11:44
除了用透明度隐藏，还可以使用 display：

元素.style.display = 'none'; //不可见

能使用的方法还挺多，不管怎么说用这法子来操作动态也挺不错

红影

马黑黑 发表于 2024-9-17 11:45

谢大咖

马黑黑

醉美水芙蓉 发表于 2024-9-17 15:39
欣赏老师带来的精彩！

马黑黑

红影 发表于 2024-9-17 11:59
能使用的方法还挺多，不管怎么说用这法子来操作动态也挺不错

看应用场景。如果做播放控制器，这个方法就不合适，需要加入替代的东东。

朵拉

漂亮制作，欣赏学习了

红影

马黑黑 发表于 2024-9-17 16:07
看应用场景。如果做播放控制器，这个方法就不合适，需要加入替代的东东。

是的，否则播放器就找不到了。

小辣椒

一个比一个漂亮了