论坛 › 马黑黑教程专版 › 民谣（测试css3d粒子模块）

马黑黑 发表于 2025-7-15 21:07

民谣（测试css3d粒子模块）

本帖最后由 马黑黑 于 2025-7-15 21:30 编辑 <br /><br /><style>
        #papa { margin: 20px0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/6/85.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #333; z-index: 1; position: relative; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
        .lzpa { perspective-origin: 100% 100%; }
        .player {background: url('https://638183.freep.cn/638183/small/2025/2501.webp') no-repeat center/cover; }
        li-zi { --size: 30px; background: url('https://638183.freep.cn/638183/small/2025/2501.webp') no-repeat center/cover; }
</style>

<div id="papa">
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/32/video6364e284f203f.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2066934128" autoplay loop></audio>
</div>

<script type="module">
        import {lz} from 'https://638183.freep.cn/638183/web/js/3dcsslz.js';
        lz(papa, { total: 70, step: 0.15, hue: 360 });
</script>

马黑黑 发表于 2025-7-15 21:07

代码：


<style>
        #papa { margin: 20px0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/6/85.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #333; position: relative; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
        .lzpa { perspective-origin: 100% 100%; }
        .player {background: url('https://638183.freep.cn/638183/small/2025/2501.webp') no-repeat center/cover; }
        li-zi { --size: 30px; background: url('https://638183.freep.cn/638183/small/2025/2501.webp') no-repeat center/cover; }
</style>

<div id="papa">
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/32/video6364e284f203f.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2066934128" autoplay loop></audio>
</div>

<script type="module">
        import {lz} from 'https://638183.freep.cn/638183/web/js/3dcsslz.js';
        lz(papa, { total: 70, step: 0.15, hue: 360 });
</script>

马黑黑 发表于 2025-7-15 21:07

本帖最后由 马黑黑 于 2025-7-15 21:34 编辑

最简单的应用代码：

<style>
    #papa { margin: 20px0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/6/85.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #333; position: relative; }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2066934128" autoplay loop></audio>

<script type="module">
    import {lz} from 'https://638183.freep.cn/638183/web/js/3dcsslz.js';
    lz(papa);
</script>

当然，酱紫的话，播放控制器只是一个橄榄色的矩形。你可以在CSS代码中加入 .player {} 选择器，设置一下背景，背景图最好是背景透明的：

.player { background: url('图片地址') no-repeat center/cover; }

CSS还可以添加：

    .btnFs { /* 全屏切换按钮样式 */ }
    .lzpa { /* 主要设置3d视图原点，例如：perspective-origin: 0 0; ，默认是 50% 50%，即本容器中心 */ }
    .li-zi { /* 主要设置粒子的背景图、粒子宽高（建议使用 --size: 20; 这样的定义，这是默认值，支持 width: 20px; height: 20px; 设置） */ }
    .player { /* 上面说了是播放器图片，还可以设置尺寸，例如：width: 200px; height: 200px;，默认是 120*120 */}

还有一些高端的CSS设置，需要理解模块里的相关源码，这里不做介绍。

JS部分，帖子容器，必须，是其ID或声明过的变量，不要引号不要引号不要引号！还有个简单配置，写在花括号里：

    { total: 70, step: 0.15, hue: 360 }

意思是：70个粒子、粒子运动歩幅为 0.15、变色滤镜 360 度。所有的参数值都是数值，total 和 hue 必须是正整数，粒子数量不宜太多，变色滤镜360以内（滤镜的作用是改变粒子颜色，仅作用于彩色图片），step 是浮点数，建议不要大于正一负一。

{ ... } 配置参数可以不设置，可以只设置部分，顺序不论，例如，只需设置粒子总数和粒子运行速度系数，则， { total: 100, step: 0.1} 和 { step: 0.1, total: 100 } 是等价的。

马黑黑 发表于 2025-7-15 21:40

粒子处于播放器的上方还是下方取决于粒子移动后所在Z轴的位置，模块将Z轴设为平移负值，多数情况下，粒子位于播放器的下方，仅在旋转角度合适时它才浮于播放器上方。

红影 发表于 2025-7-15 22:26

黑黑把这个3D粒子的代码封装好了，让代码一下子简化了{:4_199:}

红影 发表于 2025-7-15 22:29

这么多彩色粒子，真美。
这个好像把全屏也封装进去了呢。{:4_204:}

马黑黑 发表于 2025-7-15 22:37

红影 发表于 2025-7-15 22:29
这么多彩色粒子，真美。
这个好像把全屏也封装进去了呢。

全屏切换、音视频联动管理，都有了

马黑黑 发表于 2025-7-15 22:38

红影 发表于 2025-7-15 22:26
黑黑把这个3D粒子的代码封装好了，让代码一下子简化了

封装的代码有4Kb多一点，100多行代码，含CSS+HTML代码，全放在一个文件里，用起来更方便

梦江南 发表于 2025-7-16 08:54

精彩，神奇，欣赏点赞！

红影 发表于 2025-7-16 09:07

马黑黑 发表于 2025-7-15 22:37
全屏切换、音视频联动管理，都有了

怪不得代码里看不到它们的影子，在帖子里却都还存在，原来它们都被黑黑藏在封装里了，太厉害了{:4_199:}

红影 发表于 2025-7-16 09:08

马黑黑 发表于 2025-7-15 22:38
封装的代码有4Kb多一点，100多行代码，含CSS+HTML代码，全放在一个文件里，用起来更方便

封装的代码居然这么小的文件，代码真是太牛了，不占地方，不显不露水地把事全做了{:4_187:}

马黑黑 发表于 2025-7-16 13:21

红影 发表于 2025-7-16 09:07
怪不得代码里看不到它们的影子，在帖子里却都还存在，原来它们都被黑黑藏在封装里了，太厉害了
这个没啥呀，杀猪的都会做大杂烩，什么猪肚猪肝猪肺猪小肠猪大肠猪颈肉猪脚皮猪尿泡整一锅不是问题{:4_170:}

马黑黑 发表于 2025-7-16 13:22

梦江南 发表于 2025-7-16 08:54
精彩，神奇，欣赏点赞！

{:4_190:}

马黑黑 发表于 2025-7-16 13:23

红影 发表于 2025-7-16 09:08
封装的代码居然这么小的文件，代码真是太牛了，不占地方，不显不露水地把事全做了

另一个同名帖版本效果更精细：

民谣（css3d粒子模块测试）

杨帆 发表于 2025-7-16 20:52

简洁的代码，丰富的内涵，美妙的效果，谢谢马老师经典分享与讲授{:4_190:}

马黑黑 发表于 2025-7-16 21:55

杨帆 发表于 2025-7-16 20:52
简洁的代码，丰富的内涵，美妙的效果，谢谢马老师经典分享与讲授

{:4_191:}

红影 发表于 2025-7-17 21:21

马黑黑 发表于 2025-7-16 13:21
这个没啥呀，杀猪的都会做大杂烩，什么猪肚猪肝猪肺猪小肠猪大肠猪颈肉猪脚皮猪尿泡整一锅不是问题{:4_17 ...

这个烩得很高级，喷喷香呢{:4_187:}

红影 发表于 2025-7-17 21:24

马黑黑 发表于 2025-7-16 13:23
另一个同名帖版本效果更精细：

民谣（css3d粒子模块测试）

嗯嗯，加入了淡入淡出效果，而且淡入淡出的变换间隔时间还挺短，更感觉奇妙{:4_199:}

马黑黑 发表于 2025-7-17 21:45

红影 发表于 2025-7-17 21:24
嗯嗯，加入了淡入淡出效果，而且淡入淡出的变换间隔时间还挺短，更感觉奇妙

这是CSS关键帧动画

马黑黑 发表于 2025-7-17 21:45

红影 发表于 2025-7-17 21:21
这个烩得很高级，喷喷香呢

就是，不是吃的越多越好

查看完整版本: 民谣（测试css3d粒子模块）