马黑黑 发表于 2025-10-30 20:45

朝圣道

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/iud.webp') no-repeat center/cover; }
    .clipbox { position: absolute; width: 100%; height: 100%; clip-path: path('M70 0 A1 0.6 0 0 0 130 00 L100 100 L70 0'); }
</style>

<div class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.min.js';
    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=459944758'});
    tz.add('div', 'player', 'wrap200 ma').playmp3().style('top: 10%');
    tz.lzRot(7, 'player', {className: 'clipbox'});
    tz.bgprog().style('bottom: 20px; color: #fff');
    tz.fs().style('right: 20px; bottom: 20px; color: #eee');
</script>

马黑黑 发表于 2025-10-30 20:45

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/iud.webp') no-repeat center/cover; }
    .clipbox { position: absolute; width: 100%; height: 100%; clip-path: path('M70 0 A1 0.6 0 0 0 130 00 L100 100 L70 0'); }
</style>

<div class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.min.js';
    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=459944758'});
    tz.add('div', 'player', 'wrap200 ma').playmp3().style('top: 10%');
    tz.lzRot(7, 'player', {className: 'clipbox'});
    tz.bgprog().style('bottom: 20px; color: #fff');
    tz.fs().style('right: 20px; bottom: 20px; color: #eee');
</script>

子楹。 发表于 2025-10-30 20:54

沙发欣赏学习

马黑黑 发表于 2025-10-30 20:55

本帖最后由 马黑黑 于 2025-10-30 20:57 编辑

测试模块 ：tz.f.min.js

更新粒子系统相关指令 lzRan、lzRing、lzRot 处理粒子元素CSS样式渲染的逻辑：粒子 background 属性先考虑帖子 <style> 样式标签的设定，没有相关设定的看配置设定，没有设定配置的随机。除 background 属性外，width、height 属性照此规则。另，粒子支持对 animation-duration、animation-delay 的配置，例如，配置中若出现：

duration : 20,
delay: -20,

则将设置css属性 animation-duration、animation-delay，上述配置将作为边界数值纳入计算。

更换逻辑后的三个指令将以新的方式工作，粒子的可操作性有所提升。但现在是测试阶段，不可预测的错误难以避免。

马黑黑 发表于 2025-10-30 20:57

子楹。 发表于 2025-10-30 20:54
沙发欣赏学习

晚上好

子楹。 发表于 2025-10-30 20:58

马黑黑 发表于 2025-10-30 20:57
晚上好

老师好。。。{:4_190:}

马黑黑 发表于 2025-10-30 22:05

子楹。 发表于 2025-10-30 20:58
老师好。。。

{:4_190:}

红影 发表于 2025-10-30 22:24

这个又是svg的A指令绘制的图图呢，这个用了旋转生产7个叶瓣，这个小播真漂亮{:4_187:}

红影 发表于 2025-10-30 22:29

马黑黑 发表于 2025-10-30 20:55
测试模块 ：tz.f.min.js

更新粒子系统相关指令 lzRan、lzRing、lzRot 处理粒子元素CSS样式渲染的逻辑： ...

又是新的封装，黑黑一直在考虑可操作性，给使用者更多便利，太不容易了{:4_199:}

马黑黑 发表于 2025-10-30 22:40

红影 发表于 2025-10-30 22:29
又是新的封装，黑黑一直在考虑可操作性，给使用者更多便利，太不容易了

尽可能简化配置，充分利用CSS的设置手段。同时，可以扩展配置，为高级应用提供更多的可能。

马黑黑 发表于 2025-10-30 22:40

红影 发表于 2025-10-30 22:24
这个又是svg的A指令绘制的图图呢，这个用了旋转生产7个叶瓣，这个小播真漂亮

路径很迷人，关键是学会设计

朵拉 发表于 2025-10-30 23:34

本帖最后由 朵拉 于 2025-10-30 23:35 编辑

效果漂亮，学生已交作业，请老师指正{:4_190:}
这个作业也指教一下：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=87047

马黑黑 发表于 2025-10-30 23:45

朵拉 发表于 2025-10-30 23:34
效果漂亮，学生已交作业，请老师指正
这个作业也指教一下：



{:4_199:}

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

来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！
页: [1]
查看完整版本: 朝圣道