论坛 › 欢乐水吧 › 幻境迷离

马黑黑 发表于 2024-5-6 13:11

幻境迷离

<style>
        #mybox { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/2/maze.jpg') no-repeat center/cover;box-shadow: 3px 3px 6px rgba(0,0,0,.5); overflow: hidden; z-index: 1; position: relative; }
        #mybox > video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; mix-blend-mode: screen; }
        #canv { display: block; position: absolute; }
        #player { position: absolute; left: 40px; opacity: .6; cursor: pointer; animation: rot 6s linear infinite var(--state); }
        @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mybox">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2105450014" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6be5616e1.mp4" loop muted></video>
        <canvas id="canv"></canvas>
        <img id="player" src="https://638183.freep.cn/638183/small/ytji.png" width="200" height="200" alt="" />
</div>

<script>
        const sF = document.createElement('script');
        sF.src = 'https://638183.freep.cn/638183/web/js/maze.js';
        sF.charset = 'utf-8';
        document.body.appendChild(sF);
        const lz = {pa: mybox, size: 12, lines: 50, step: 160, opacity: .7};
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-5-6 13:11

<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">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<cl-cd data-idx="2">&nbsp; &nbsp; #mybox { <span class="tBlue">margin:</span> 20px 0 20px 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/2/maze.jpg'</span>) no-repeat center/cover;<span class="tBlue">box-shadow:</span> 3px 3px 6px rgba(0,0,0,.5); <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">&nbsp; &nbsp; #mybox &gt; 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% + 100px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="4">&nbsp; &nbsp; #canv { <span class="tBlue">display:</span> block; <span class="tBlue">position:</span> absolute; }</cl-cd>
<cl-cd data-idx="5">&nbsp; &nbsp; #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 40px; <span class="tBlue">opacity:</span> .6; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="6">&nbsp; &nbsp; @keyframes rot { to { <span class="tBlue">transform:</span> rotate(1turn); } }</cl-cd>
<cl-cd data-idx="7">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="8">&nbsp;</cl-cd>
<cl-cd data-idx="9">&lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mybox"</span>&gt;</cl-cd>
<cl-cd data-idx="10">&nbsp; &nbsp; &lt;<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>=2105450014"</span> autoplay loop&gt;&lt;<span class="tDarkRed">/audio</span>&gt;</cl-cd>
<cl-cd data-idx="11">&nbsp; &nbsp; &lt;<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6be5616e1.mp4"</span> loop muted&gt;&lt;<span class="tDarkRed">/video</span>&gt;</cl-cd>
<cl-cd data-idx="12">&nbsp; &nbsp; &lt;<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span>&gt;&lt;<span class="tDarkRed">/canvas</span>&gt;</cl-cd>
<cl-cd data-idx="13">&nbsp; &nbsp; &lt;<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/ytji.png"</span> width=<span class="tMagenta">"200"</span> height=<span class="tMagenta">"200"</span> alt=<span class="tMagenta">""</span> /&gt;</cl-cd>
<cl-cd data-idx="14">&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
<cl-cd data-idx="15">&nbsp;</cl-cd>
<cl-cd data-idx="16">&lt;<span class="tDarkRed">script</span>&gt;</cl-cd>
<cl-cd data-idx="17">&nbsp; &nbsp; <span class="tBlue">const</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18">&nbsp; &nbsp; sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/maze.js'</span>;</cl-cd>
<cl-cd data-idx="19">&nbsp; &nbsp; sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="20">&nbsp; &nbsp; <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<div class="tGreen"><cl-cd data-idx="21">&nbsp; &nbsp; /* 粒子配置</cl-cd>
<cl-cd data-idx="22">&nbsp; &nbsp;    pa 指定帖子<span class="tRed">id</span>, 比如 <span class="tRed">id</span>=<span class="tMagenta">"mybox"</span> 就配置为 <span class="tBlue">pa:</span> mybox</cl-cd>
<cl-cd data-idx="23">&nbsp; &nbsp;    size 设置粒子大小</cl-cd>
<cl-cd data-idx="24">&nbsp; &nbsp;    lines 画多少条线重来</cl-cd>
<cl-cd data-idx="25">&nbsp; &nbsp;    step 绘制单个粒子时间间隔，毫秒，数字越小速度也快</cl-cd>
<cl-cd data-idx="26">&nbsp; &nbsp;    opacity 粒子透明度，0~1之间</cl-cd>
<cl-cd data-idx="27">&nbsp; &nbsp; */</cl-cd></div>
<cl-cd data-idx="28">&nbsp; &nbsp; <span class="tBlue">const</span> lz = {<span class="tBlue">pa:</span> mybox, <span class="tBlue">size:</span> 12, <span class="tBlue">lines:</span> 50, <span class="tBlue">step:</span> 160, <span class="tBlue">opacity:</span> .7};</cl-cd>
<cl-cd data-idx="29">&nbsp; &nbsp; player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="30">&lt;<span class="tDarkRed">/script</span>&gt;</cl-cd>
</div>

马黑黑 发表于 2024-5-6 13:12

本帖最后由 马黑黑 于 2024-5-6 13:23 编辑

正在绘制的粒子能响应鼠标指针移动操作：指针移到到靠近它，粒子会原路返回。拦截成功率看人品 :)
maze.js 未做移动设备的适配，一切基于PC！

愤怒的葡萄 发表于 2024-5-6 13:29

马版的主题帖都是制作得挺漂亮的，学习欣赏了。

马黑黑 发表于 2024-5-6 13:30

愤怒的葡萄 发表于 2024-5-6 13:29
马版的主题帖都是制作得挺漂亮的，学习欣赏了。

下午好。这个简单的。

愤怒的葡萄 发表于 2024-5-6 13:37

马黑黑 发表于 2024-5-6 13:30
下午好。这个简单的。

葡萄刚刚睡醒，这段时间总感觉有点劳累的，小睡了二十分钟的时间，头脑也清醒点了。

愤怒的葡萄 发表于 2024-5-6 13:41

马黑黑 发表于 2024-5-6 13:30
下午好。这个简单的。

我查看了代码，还是有点不懂的，我等有时间晚上来学习一下马版在论坛里分享的教程吧。

马黑黑 发表于 2024-5-6 13:47

愤怒的葡萄 发表于 2024-5-6 13:37
葡萄刚刚睡醒，这段时间总感觉有点劳累的，小睡了二十分钟的时间，头脑也清醒点了。

补觉很有必要的

马黑黑 发表于 2024-5-6 13:51

愤怒的葡萄 发表于 2024-5-6 13:41
我查看了代码，还是有点不懂的，我等有时间晚上来学习一下马版在论坛里分享的教程吧。

做音画帖需要几个方面的知识：

CSS（设置帖子元素的样式）
HTML（帖子元素结构）
JavaScript（帖子交互）

其中，难度最大的是 JavaScript，尤其是当需要自己写代码的时候。JS内丝庞杂、有很多很抽象的东西。

愤怒的葡萄 发表于 2024-5-6 13:55

马黑黑 发表于 2024-5-6 13:47
补觉很有必要的

昨天晚上九点多就直打瞌睡了，今天中午小憩一会。

愤怒的葡萄 发表于 2024-5-6 13:56

马黑黑 发表于 2024-5-6 13:51
做音画帖需要几个方面的知识：

CSS（设置帖子元素的样式）

我抽空学习一下吧，我下午有事情，很快就下了。

南无月 发表于 2024-5-6 18:12

马黑黑 发表于 2024-5-6 13:12
正在绘制的粒子能响应鼠标指针移动操作：指针移到到靠近它，粒子会原路返回。拦截成功率看人品 :)
maze.js ...

这个拦截好玩，刚试了一下，
它会回头重新走一遍，
再碰边时从另一个方向画起。。{:4_170:}

南无月 发表于 2024-5-6 18:13

手机试了，也不小心拦截成功了咋整。。{:4_173:}

南无月 发表于 2024-5-6 18:15

哎哟我的天，我这会没动它。
回贴的功夫这个贪吃蛇几乎爬了个满屏。
lines: 50, 画50线重来，是啥意思啊。。
满屏爬完算一条？还是拐个直角弯就算一条

马黑黑 发表于 2024-5-6 18:21

南无月 发表于 2024-5-6 18:13
手机试了，也不小心拦截成功了咋整。。

人品好

马黑黑 发表于 2024-5-6 18:22

愤怒的葡萄 发表于 2024-5-6 13:56
我抽空学习一下吧，我下午有事情做，很快就下了，不像马版天天扎根花潮论坛的。

工作第一

马黑黑 发表于 2024-5-6 18:22

南无月 发表于 2024-5-6 18:15
哎哟我的天，我这会没动它。
回贴的功夫这个贪吃蛇几乎爬了个满屏。
lines: 50, 画50线重来，是啥意思啊 ...

碰壁转向算一条

南无月 发表于 2024-5-6 19:43

马黑黑 发表于 2024-5-6 18:21
人品好

{:4_173:}运气不赖

南无月 发表于 2024-5-6 19:44

马黑黑 发表于 2024-5-6 18:22
碰壁转向算一条

好哒。。我盯着它跑完全程。。{:4_173:}
如果要铺满全图，可以把粒子调大一些，可以调快 一点。。

马黑黑 发表于 2024-5-6 19:45

南无月 发表于 2024-5-6 19:44
好哒。。我盯着它跑完全程。。
如果要铺满全图，可以把粒子调大一些，可以调快 一点。。

为什么要铺满全图呢{:4_170:}

查看完整版本: 幻境迷离