民谣（测试css3d粒子模块）

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

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

代码：

<style>
#papa { margin: 20px 0 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: 20px 0 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 } 是等价的。