时空撞击

马黑黑

马黑黑

关于 lz 的 hue 参数，解释一下：

lz 的颜色使用 hsl 颜色表达体系，h 指的是 hue，具体指色环中的度数，取值在 0~360 之间。lz 的颜色取决于 hue 值的设定，它们在起伏的时候会在此基础上产生一定的色差。

相关约定：

canvas id="canv"，audio id="aud"，这两个不能改。canvas画布的尺寸建议与帖子容器大小一致，特许需要可以自行设置。

马黑黑

帖子代码

<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; 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);

    /* 粒子配置     papa : 指定帖子容器 id（不要引号）     hue : 粒子色彩在色环中的角度（0~360）     total : 粒子数量     deep : 粒子起伏深度（负值朝下起伏、正值朝上起伏）     */

    var lz = {papa: mybox, hue: 60, total: 10000, deep: -80};     player.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

朵拉

这效果 赞一个

愤怒的葡萄

这个音画作品看上去挺酷的。

起个网名好难

                               
登录/注册后可看大图

南无月

这个粒子波浪效果酷炫，气势磅礴。。
视 频和背景色彩一体化，漂亮。。

南无月

马黑黑 发表于 2024-5-12 10:53
关于 lz 的 hue 参数，解释一下：

lz 的颜色使用 hsl 颜色表达体系，h 指的是 hue，具体指色环中的度数 ...

说明很详细，颜色原来在这里改的

红影

这场景太壮观了，这样的粒子真惊艳

红影

这视频也找得这么好，和粒子这么相配的，黑黑太棒了

马黑黑

南无月 发表于 2024-5-12 12:26
说明很详细，颜色原来在这里改的

马黑黑

红影 发表于 2024-5-12 14:43
这视频也找得这么好，和粒子这么相配的，黑黑太棒了

马黑黑

红影 发表于 2024-5-12 14:41
这场景太壮观了，这样的粒子真惊艳

还不错

南无月

马黑黑 发表于 2024-5-12 15:00

粒子有一万个，一万年就是这么多

马黑黑

南无月 发表于 2024-5-12 17:09
粒子有一万个，一万年就是这么多

因为要模拟3d，波浪线由点组成，所以需要这么多的点，最少应不低于5000。

红影

马黑黑 发表于 2024-5-12 15:00

这个效果好看，空了我也去学做个

红影

马黑黑 发表于 2024-5-12 15:01
还不错

效果很震撼

马黑黑

红影 发表于 2024-5-12 19:21
这个效果好看，空了我也去学做个

相对来说比较简单的，设计好帖子就行

马黑黑

红影 发表于 2024-5-12 19:21
效果很震撼

视频和画布动画相得益彰

南无月

马黑黑 发表于 2024-5-12 18:14
因为要模拟3d，波浪线由点组成，所以需要这么多的点，最少应不低于5000。

之前那个有粒子点个数设置吗。
我以为这类粒子数应是固定的，不能随意更改，不然达不到最优效果
既然可改，回头就试着改看看。。