晚霞
<style>#mydiv { margin: 20px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/1/wjxx.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px #000; z-index: 1; cursor: crosshair; position: relative; }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2093894929" loop autoplay></audio>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/line-lz.js';
document.body.appendChild(sF);
var lz = { papa: '#mydiv', total: 100, radius: 1, color: 'rgba(205,205,0,.5)' }
</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"> #mydiv { <span class="tBlue">margin:</span> 20px 0 0 calc(50% - 721px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 800px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/wjxx.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 4px 4px 8px #000; <span class="tBlue">z-index:</span> 1; <span class="tBlue">cursor:</span> crosshair; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="4"> </cl-cd>
<cl-cd data-idx="5"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="6"><<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>=2093894929"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="11">sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="12">sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/line-lz.js'</span>;</cl-cd>
<cl-cd data-idx="13"><span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<div class="tGreen"><cl-cd data-idx="14">/* lz参数配置说明</cl-cd>
<cl-cd data-idx="15"> papa : 帖子容器<span class="tRed">id</span>标识，带#号，需要引号，如果是class，带 . 号 [例] <span class="tBlue">papa:</span> <span class="tMagenta">'.tiezi'</span>,</cl-cd>
<cl-cd data-idx="16"> total : 粒子总数</cl-cd>
<cl-cd data-idx="17"> radius : 线段两端的小圆点半径，取值 0.5~2 之间为合适</cl-cd>
<cl-cd data-idx="18"> color : 点和线段颜色，必须使用 rgba(r,g,b,a) 格式，需要引号。其中，a 为alpha通道，取值 0~1 之间，建议 0.5 或 .5</cl-cd>
<cl-cd data-idx="19">*/</cl-cd></div>
<cl-cd data-idx="20"><span class="tBlue">var</span> lz = { <span class="tBlue">papa:</span> <span class="tMagenta">'#mydiv'</span>, <span class="tBlue">total:</span> 100, <span class="tBlue">radius:</span> 1, <span class="tBlue">color:</span> <span class="tMagenta">'rgba(205,205,0,.5)'</span> }</cl-cd>
<cl-cd data-idx="21"> </cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 2024-4-12 08:03 编辑
帖子所使用的JS资源已经封装音频与粒子效果的联动功能，音频播放，粒子运动，音频暂停，粒子停止运动。
音频播放暂停控制为帖子容器元素，在帖子的任何地方点击均能暂停/播放音乐。点击帖子，粒子有响应动作。
粒子除相应鼠标在帖子上的点击操作外，还能相应鼠标在帖子上的悬停操作：若鼠标悬停与帖子界面某处，粒子会非常缓慢地向鼠标指针方向聚拢、成团，形状极其美妙。鼠标移开，它们会自动散开，鼠标点击，它们会跳弹而去。还有，响应鼠标指针在帖子上的移动操作，请自行体会。
粒子核心代码来源于网络，我仅根据应用场景和功能需求做些增删修改并封装成独立资源。 人生晚霞别样红,逍遥自在乐其中。 有趣，非常奇妙的效果。
鼠标悬停，附近粒子会聚拢过来，点击则暂停，再点击，则散开，仿佛受惊的小动物{:4_173:} 它们会自己动，还能互动游戏，这些粒子仿佛有意识一样呢{:4_173:} 红影 发表于 2024-4-12 10:41
有趣，非常奇妙的效果。
鼠标悬停，附近粒子会聚拢过来，点击则暂停，再点击，则散开，仿佛受惊的小动物{: ...
好玩吧 红影 发表于 2024-4-12 10:44
它们会自己动，还能互动游戏，这些粒子仿佛有意识一样呢
代码赋予它们意识：能够响应鼠标的特定动作 梦油 发表于 2024-4-12 09:23
人生晚霞别样红,逍遥自在乐其中。
如此甚好吧？ 马黑黑 发表于 2024-4-12 11:23
好玩吧
特别好玩也特别神奇呢{:4_187:} 马黑黑 发表于 2024-4-12 11:24
代码赋予它们意识：能够响应鼠标的特定动作
这样的粒子很有灵性的感觉{:4_199:} 漂亮{:4_199:} 欣赏老师佳作 世外桃源 发表于 2024-4-12 14:23
欣赏老师佳作
{:4_190:} 红影 发表于 2024-4-12 13:18
这样的粒子很有灵性的感觉
{:4_180:} 红影 发表于 2024-4-12 13:17
特别好玩也特别神奇呢
有一些网站使用这类效果做全页背景 霞光映照下的花海美得惊心动魄，令人沉醉。。
空间里的梦幻线条丝丝缕缕缠绕，随鼠标方向聚拢
创意，效果都是一流。 马黑黑 发表于 2024-4-12 11:24
如此甚好吧？
是的。但愿没有遗憾地走完人生最后一段路。 跟了一个贴子。一会发出来。
发现如果把粒子数量改为500，鼠标周围很快聚起一个极圆且可以动的实心球。。{:4_173:} 线条粗细刚刚好。。改大些显得粗笨，小些又看不清。。老师分寸拿捏的恰到好处{:4_187:}