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>
<h2>帖子代码</h2>
<div class="hE"><pre>
<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>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 音乐来自自然音乐大师—Dan Gibson的Shimmer专辑 本帖最后由 马黑黑 于 2024-9-17 08:15 编辑 <br /><br /><p>测试：追加全屏按钮</p>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', scale: , css: 'bottom: 20px; --bg: transparent; --color: white;'});
</script> 祝黑黑老师中秋节快乐，阖家幸福安康！ 这个聪明，用opacity的变化来暂停svg动态{:4_173:} svg动图还带两个方向的阴影呢，更漂亮了。
小播是纯代码的月亮，设计得也很漂亮{:4_199:} 背景有珠珠，效果也是散发的珠珠。很有想象的设计。
音乐好听{:4_199:} 红影 发表于 2024-9-17 10:30
背景有珠珠，效果也是散发的珠珠。很有想象的设计。
音乐好听
感谢支持 马黑黑 发表于 2024-9-17 11:40
感谢支持
我是来学习的啊，先支持再使劲学习{:4_173:} 红影 发表于 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
我是来学习的啊，先支持再使劲学习
{:4_190:} 马黑黑 发表于 2024-9-17 11:44
除了用透明度隐藏，还可以使用 display：
元素.style.display = 'none'; //不可见
能使用的方法还挺多，不管怎么说用这法子来操作动态也挺不错{:4_187:} 马黑黑 发表于 2024-9-17 11:45
谢大咖{:4_187:} 醉美水芙蓉 发表于 2024-9-17 15:39
欣赏老师带来的精彩！
{:4_190:} 红影 发表于 2024-9-17 11:59
能使用的方法还挺多，不管怎么说用这法子来操作动态也挺不错
看应用场景。如果做播放控制器，这个方法就不合适，需要加入替代的东东。 漂亮制作，欣赏学习了{:4_190:} 马黑黑 发表于 2024-9-17 16:07
看应用场景。如果做播放控制器，这个方法就不合适，需要加入替代的东东。
是的，否则播放器就找不到了。 一个比一个漂亮了{:4_178:}
页:
[1]