Blissful Mind
<style>#papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/bliss.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.6); z-index: 1; display: grid; place-items: center; position: relative; }
#player { position: absolute; bottom: 0; width: 120px; height: 180px; cursor: pointer; z-index: 10; }
.vid { position: absolute; bottom: 0; width: 200px; height: 200px; object-fit: cover; mix-blend-mode: screen; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=408277271" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/25193134/01/01/94/612c4447afe84.mp4" loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var sc = document.createElement('script');
sc.charset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';
document.body.appendChild(sc);
var lz = {papa: '#papa', total: 100, r: 3, max_r: 15, step: 0.5, color: 'rgba(255,255,255,.7)', opacity: .9, move: false};
var mState = () => {
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
lz.move = !aud.paused;
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 721px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 720px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/bliss.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px rgba(0,0,0,.6); <span class="tBlue">z-index:</span> 1; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">#player { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 120px; <span class="tBlue">height:</span> 180px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">z-index:</span> 10; }</cl-cd>
<cl-cd data-idx="4">.vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 200px; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="5"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="8"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=408277271"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/25193134/01/01/94/612c4447afe84.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> title=<span class="tMagenta">"播放/暂停"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><span class="tBlue">var</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="16"><span class="tBlue">var</span> sc = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="17">sc.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="18">sc.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/dot-lz.js'</span>;</cl-cd>
<cl-cd data-idx="19"><span class="tRed">document</span>.body.appendChild(sc);</cl-cd>
<cl-cd data-idx="20"> </cl-cd>
<cl-cd data-idx="21"><span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, <span class="tBlue">total:</span> 100, <span class="tBlue">r:</span> 3, max_<span class="tBlue">r:</span> 15, <span class="tBlue">step:</span> 0.5, <span class="tBlue">color:</span> <span class="tMagenta">'rgba(255,255,255,.7)'</span>, <span class="tBlue">opacity:</span> .9, <span class="tBlue">move:</span> false};</cl-cd>
<cl-cd data-idx="22"> </cl-cd>
<cl-cd data-idx="23"><span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="24"> vids.forEach(vid => aud.paused ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="25"> lz.move = !aud.paused;</cl-cd>
<cl-cd data-idx="26">};</cl-cd>
<cl-cd data-idx="27"> </cl-cd>
<cl-cd data-idx="28">aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30">player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="31"> </cl-cd>
<cl-cd data-idx="32"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 2024-4-23 11:46 编辑
由于本论坛的一些资源加载失败，导致整体页面的一些基于元素布局的数据出现不可琢磨的现象，最初的 dot-lz.js 脚本在这里出现水土不服，现已修正脚本，理论上粒子响应鼠标指针移动的准确度应该正常了。
dot-lz 的使用说明请查阅：dot-lz.js使用说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
脚本为原创拙作，可以另存后上传到自己的空间，可以随意修改和使用，不用注明作者和出处。
非常漂亮的音画作品，点赞！~~~ 愤怒的葡萄 发表于 2024-4-23 10:21
非常漂亮的音画作品，点赞！~~~
一些计算在这个论坛不够精准 马黑黑 发表于 2024-4-23 10:25
一些计算在这个论坛不够精准
马版，你的作品挺不错的了，葡萄还不会做呢。 愤怒的葡萄 发表于 2024-4-23 10:25
马版，你的作品挺不错的了，葡萄还不会做呢。
X3.2论坛程序有诸多问题，导致一些JS计算失效。我在 3.4 版本上测试过，非常完美，在自由页面上更没问题：
http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1713832591 马黑黑 发表于 2024-4-23 10:29
X3.2论坛程序有诸多问题，导致一些JS计算失效。我在 3.4 版本上测试过，非常完美，在自由页面上更没问题 ...
马版挺了不起了，你分享了很多主题帖，葡萄不会制作音画的，我也想学习一下，以后我会在论坛里看看你分享的教程的。 愤怒的葡萄 发表于 2024-4-23 10:33
马版挺了不起了，你分享了很多主题帖，葡萄不会制作音画的，我也想学习一下，以后我会在论坛里看看你分享 ...
这个学起来需要一些时间 马黑黑 发表于 2024-4-23 10:33
这个学起来需要一些时间
我会尝试一下的，其实制作音画我很早就想学了，我在东篱雅苑论坛看到很多版主分享的精美的音画帖，当时我就想学一下了。 愤怒的葡萄 发表于 2024-4-23 10:36
我会尝试一下的，其实制作音画我很早就想学了，我在东篱雅苑论坛看到很多版主分享的精美的音画帖，当时我 ...
那还是有一点基础的，学起来很快能上手 非常漂亮的 马黑黑 发表于 2024-4-23 11:22
那还是有一点基础的，学起来很快能上手
马版一直在论坛啊？我今天早上上来了一会。 愤怒的葡萄 发表于 2024-4-23 11:28
马版一直在论坛啊？我今天早上上来了一会。
在家养病，贪玩了{:4_170:} 小文 发表于 2024-4-23 11:24
非常漂亮的
针对花潮论坛做了一些改动，现在粒子响应鼠标指针的精准度应该可以了 漂亮，欣赏学习~~{:4_178:} 马黑黑 发表于 2024-4-23 10:16
由于本论坛的一些资源加载失败，导致整体页面的一些基于元素布局的数据出现不可琢磨的现象，最初的 dot-lz. ...
我可能是由于限制的原因，电脑有问题。（得换台电脑再试)
手机浏览此贴，触击点周围粒子变大，一切正常。。{:4_187:} 马黑黑 发表于 2024-4-23 11:41
针对花潮论坛做了一些改动，现在粒子响应鼠标指针的精准度应该可以了
做贴跟做程序似的，需要整两套。。{:4_170:} 南无月 发表于 2024-4-23 12:38
做贴跟做程序似的，需要整两套。。
其实也就是一套，整合一下 南无月 发表于 2024-4-23 12:37
我可能是由于限制的原因，电脑有问题。（得换台电脑再试)
手机浏览此贴，触击点周围粒子变大，一切正常 ...
{:4_190:}