时空撞击
<style>#mybox { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/webp/1000.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#canv { position: absolute; mix-blend-mode: screen; }
#player { position: absolute; left: 30px; top: 30px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#mybox > video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mybox">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1996509792" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2405179/00/02/42/5b5fca1e49229.mp4" loop muted></video>
<canvas width="1024" height="576" id="canv"></canvas>
<img id="player" src="https://638183.freep.cn/638183/small/14w.png" width="120" height="120" alt="" title="播放/暂停" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js2024/oc-lz.js';
document.body.appendChild(sF);
var lz = {papa: mybox, hue: 60, total: 10000, deep: -80};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
关于 lz 的 hue 参数，解释一下：
lz 的颜色使用 hsl 颜色表达体系，h 指的是 hue，具体指色环中的度数，取值在 0~360 之间。lz 的颜色取决于 hue 值的设定，它们在起伏的时候会在此基础上产生一定的色差。
相关约定：
canvas id="canv"，audio id="aud"，这两个不能改。canvas画布的尺寸建议与帖子容器大小一致，特许需要可以自行设置。 <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"> #mybox { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 576px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/1000.webp'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #canv { <span class="tBlue">position:</span> absolute; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="4"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 30px; <span class="tBlue">top:</span> 30px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 8s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> #mybox > video { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mybox"</span>></cl-cd>
<cl-cd data-idx="10"> <<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>=1996509792"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2405179/00/02/42/5b5fca1e49229.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">canvas</span> width=<span class="tMagenta">"1024"</span> height=<span class="tMagenta">"576"</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/14w.png"</span> width=<span class="tMagenta">"120"</span> height=<span class="tMagenta">"120"</span> alt=<span class="tMagenta">""</span> title=<span class="tMagenta">"播放/暂停"</span> /></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js2024/oc-lz.js'</span>;</cl-cd>
<cl-cd data-idx="19"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<div class="tGreen"><cl-cd data-idx="20"> /* 粒子配置</cl-cd>
<cl-cd data-idx="21"> papa : 指定帖子容器 <span class="tRed">id</span>（不要引号）</cl-cd>
<cl-cd data-idx="22"> hue : 粒子色彩在色环中的角度（0~360）</cl-cd>
<cl-cd data-idx="23"> total : 粒子数量</cl-cd>
<cl-cd data-idx="24"> deep : 粒子起伏深度（负值朝下起伏、正值朝上起伏）</cl-cd>
<cl-cd data-idx="25"> */</cl-cd></div>
<cl-cd data-idx="26"> <span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> mybox, <span class="tBlue">hue:</span> 60, <span class="tBlue">total:</span> 10000, <span class="tBlue">deep:</span> -80};</cl-cd>
<cl-cd data-idx="27"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="28"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
这效果 赞一个{:4_178:} 这个音画作品看上去挺酷的。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 这个粒子波浪效果酷炫，气势磅礴。。
视 频和背景色彩一体化，漂亮。。{:4_199:} 马黑黑 发表于 2024-5-12 10:53
关于 lz 的 hue 参数，解释一下：
lz 的颜色使用 hsl 颜色表达体系，h 指的是 hue，具体指色环中的度数 ...
说明很详细，颜色原来在这里改的{:4_199:} 这场景太壮观了，这样的粒子真惊艳{:4_199:} 这视频也找得这么好，和粒子这么相配的，黑黑太棒了{:4_199:} 南无月 发表于 2024-5-12 12:26
说明很详细，颜色原来在这里改的
{:4_181:} 红影 发表于 2024-5-12 14:43
这视频也找得这么好，和粒子这么相配的，黑黑太棒了
{:4_203:} 红影 发表于 2024-5-12 14:41
这场景太壮观了，这样的粒子真惊艳
还不错
马黑黑 发表于 2024-5-12 15:00
粒子有一万个，{:4_170:}一万年就是这么多 南无月 发表于 2024-5-12 17:09
粒子有一万个，一万年就是这么多
因为要模拟3d，波浪线由点组成，所以需要这么多的点，最少应不低于5000。 马黑黑 发表于 2024-5-12 15:00
这个效果好看，空了我也去学做个{:4_187:} 马黑黑 发表于 2024-5-12 15:01
还不错
效果很震撼{:4_187:} 红影 发表于 2024-5-12 19:21
这个效果好看，空了我也去学做个
相对来说比较简单的，设计好帖子就行 红影 发表于 2024-5-12 19:21
效果很震撼
视频和画布动画相得益彰 马黑黑 发表于 2024-5-12 18:14
因为要模拟3d，波浪线由点组成，所以需要这么多的点，最少应不低于5000。
之前那个有粒子点个数设置吗。
我以为这类粒子数应是固定的，不能随意更改，不然达不到最优效果
既然可改，回头就试着改看看。。