马黑黑 发表于 2025-11-2 08:13

tz随机粒子充当文章帖子背景

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1.2';
        #player { margin: 10px; width: 90px; height: 90px; cursor: pointer; }
        .ball { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(var(--cc), cyan); }
        .float-left { float: left; }
        .float-right { float: right; }
        .wz { background: #333; color: #eee; }
        .wz h2 { font-size: 2em; }
        .wz > p:not() { margin: 5px 0; text-indent: 2em; }
        .wz pre { padding: 12px; background: #444; font-size: 18px; white-space: pre-wrap; tab-size: 4; }
        .lz { opacity: 0.35; background: linear-gradient(var(--cc), cyan); border-radius: 0 50%; animation: rot 4s infinite alternate var(--state); }
        .clip-polygon { margin: 0 10px; width: 200px; height: 200px; background: linear-gradient(#333, lightgreen); clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%); shape-outside: polygon(0 50%,50% 0,100% 50%,50% 100%); font: bold 20px sans-serif; opacity: 0.6; display: grid; place-items: center; text-align: center; }
        txt-red { color: red; }
        txt-green { color: lightgreen; }
</style>

<div id="wz" class="wz"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v1.js';
        const tz = TZ.TZ('wz');
       
        const text = `<h2 class="tMid"><strong>tz随机粒子充当文章容器背景</strong></h2>
        <div class="clip-polygon float-left">tz.lzRan()</div>
        <p>使用 tz 的 lzRan() 指令可以轻松地给页面指定元素生成随机分布的粒子，这些粒子是真实的元素，所以它们不是真正能做背景，或者换个说法，它们并不是基于元素的 background-image 的背景图像，它们只是“冒充”背景，说充当背景显得文雅、含蓄、有礼貌。它们要做一些处理，首先要规避在遮挡或影响文本阅读层面可能存在的问题，简单的做法是给其设定为一个合理的透明度值，这样不论它们是覆盖文本还是做文本的底层修饰都能够在很大程度上减缓对文本阅读的不良影响；其次略作修饰，不让粒子过于单一化。下面是具体做法：</p>
        <div id="player" class="float-right rot-ani"></div>
        <p>步骤一：为粒子设计一个CSS选择器，.lz {}，内容如下：</p>
<pre>
    .lz {
      opacity: 0.35; <txt-green>/* 透明度 */</txt-green>
      background: linear-gradient(var(--cc), cyan); <txt-green>/* 渐变背景，变量 --cc 将由tz处理 */</txt-green>
      border-radius: 0 100%; <txt-green>/* 橄榄形状 */</txt-green>
      animation: rot 4s infinite alternate var(--state); <txt-green>/* 粒子动画 */</txt-green>
    }
</pre>
        <p>步骤二：在JS代码中使用 tz.Ran() 指令生成若干个粒子（这里假设页面文章容器的id="wz"）：</p>
<pre>
    tz.lzRan(15, 'wz', {
      tag: 'div',      <txt-green>/* 粒子的标签名 */</txt-green>
      className: 'lz', <txt-green>/* 粒子的类名 */</txt-green>
      cc: true,      <txt-green>/* 粒子启用 --cc 颜色值随机赋值机制（配合CSS） */</txt-green>
      delay: -8      <txt-green>/* 粒子动画延时边界值（提前运行0~8秒） */</txt-green>
    });
    <txt-green>// 可以简化成 : tz.lzRan(15, 'wz', {className: 'lz', cc: true, delay: -8});</txt-green>
</pre>
        <p>lzRan() 指令头两个参数必须，第一个参数是粒子数量，第二个参数是容器节点或id，第三个是粒子配置参数，它可以是0配置，即不要这个配置，但配置得好可以做出精彩纷呈的粒子效果。配置很灵活，想指定粒子class，使用 className 键名加键值表示，想配套CSS --cc 变量设置背景或边框随机颜色，使用 cc 键名加 true 表示，想在粒子动画中设置随机延时运行时间，使用 delay 键名加键值表示，还有其它和CSS高度一致的键名加键值表达方式，例如设置宽度，width: 40 或 wdith: '40px'，百分比可以，width: '5%'。基于CSS的设置，建议能在CSS中设置的尽量不在配置里设置，但这不是硬性规定，一切取决于指令的支持度和个人的选择偏好。</p>
        <p>下面给一个完整的代码示例：</p>
<pre>
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v2';
        .clip-circle { margin: 0 10px; max-width: 160px; clip-path: circle(50%); shape-outside: circle(50%); shape-box: margin-box; }
        .float-left { float: left; }
        .float-right { float: right; }
        .wz { width: 800px; background: #eee; }
        .wz &gt; p:not() { margin: 5px 0; text-indent: 2em; }
        .wz h2 { font-size: 2em; }
        .lz { opacity: 0.35; background: linear-gradient(var(--cc), cyan); border-radius: 0 100%; animation: rot 4s infinite alternate var(--state); }
&lt;/style&gt;

&lt;div id="wz" class="wz"&gt;&lt;/div&gt;

&lt;script type="module"&gt;
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.v2.min.js?v2';
        const tz = TZ.TZ('wz');
       
        const text = \`&lt;h2 class="tMid"&gt;文章标题&lt;/h2&gt;
&lt;div id="player" class="clip-circle float-right"&gt;&lt;/div&gt;
&lt;p&gt;文本段落一&lt;/p&gt;
&lt;p&gt;文本段落二&lt;/p&gt;
&lt;img class="clip-circle float-left" src="插图图片地址" alt="" /&gt;
&lt;p&gt;文本段落三&lt;/p&gt;
&lt;p&gt;文本段落四&lt;/p&gt;
&lt;p&gt;文本段落五&lt;/p&gt;\`;

        tz.lzRan(20, wz, {tag: 'div', className: 'lz', cc: true, delay: -8});
        tz.text(text, wz);
        tz.add('audio', '', '', {src: 'MP3地址'});
        tz.add('img', '', 'rot-ani', {
                src: '播放器图片地址'
        }).to('player').style('cursor: pointer').playmp3();
&lt;/script&gt;
</pre>
        <p>粒子的形状和行有一定的点缀作用，可以为文章增色，但需要把握分寸，不能让它们喧宾夺主。</p>
`;

        tz.lzRan(20 , wz, {tag: 'div', className: 'lz', cc: true, delay: -8});
        tz.text(text, wz);
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1371757760'});
        tz.lzRing(10, 'player', { className: 'ball', cc: true });
        tz.playmp3('player');
</script>

马黑黑 发表于 2025-11-2 08:23

附：最新的 tz 版本

'https://638183.freep.cn/638183/web/tz/tz.v1.js'

可以更换后面代码实例中的JS导入地址，不更换也没关系，都能用

樵歌 发表于 2025-11-2 11:08

没有花飞飞好看，这飞的是叶子{:4_189:}

梦江南 发表于 2025-11-2 11:41

谢谢黑黑老师辛苦，学习了。

马黑黑 发表于 2025-11-2 18:37

樵歌 发表于 2025-11-2 11:08
没有花飞飞好看，这飞的是叶子

这是可以定制的

马黑黑 发表于 2025-11-2 18:38

梦江南 发表于 2025-11-2 11:41
谢谢黑黑老师辛苦，学习了。

{:4_190:}

杨帆 发表于 2025-11-2 20:35

以随机粒子充当文章帖子背景，富有新意，谢谢马老师经典示范{:4_191:}

马黑黑 发表于 2025-11-2 23:33

杨帆 发表于 2025-11-2 20:35
以随机粒子充当文章帖子背景，富有新意，谢谢马老师经典示范

{:4_191:}

樵歌 发表于 2025-11-3 07:36

马黑黑 发表于 2025-11-2 18:37
这是可以定制的

自己能换，可换不来{:4_201:}

马黑黑 发表于 2025-11-3 07:40

樵歌 发表于 2025-11-3 07:36
自己能换，可换不来

所以说叫小辣椒帮你做个套套

红影 发表于 2025-11-3 23:55

这个妆点真美丽，刷新了一下，主要感受一下它的随机分布。
色彩的设置也漂亮，很赞{:4_187:}

马黑黑 发表于 2025-11-4 12:07

红影 发表于 2025-11-3 23:55
这个妆点真美丽，刷新了一下，主要感受一下它的随机分布。
色彩的设置也漂亮，很赞

{:4_190:}

偶然~ 发表于 2025-11-17 13:46

来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！
页: [1]
查看完整版本: tz随机粒子充当文章帖子背景