马黑黑 发表于 2025-11-11 12:04

烬雪凌月-OC曲

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/jxly.webp') no-repeat center/cover; }
        .player { position: absolute; top: 20px; width: 200px; height: 200px; mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
        const tz = TZ.TZ('pa');
        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2733351771'});
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2402760/00/01/64/5b4744b57baf0.mp4' });
        tz.add('img', '', 'player rotate-ani', { src: 'https://638183.freep.cn/638183/small/f02.png' }).playmp3();
        tz.fs().style('bottom: 20px');
</script>

马黑黑 发表于 2025-11-11 12:04

帖子代码

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/jxly.webp') no-repeat center/cover; }
        .player { position: absolute; top: 20px; width: 200px; height: 200px; mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
        const tz = TZ.TZ('pa');
        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2733351771'});
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2402760/00/01/64/5b4744b57baf0.mp4' });
        tz.add('img', '', 'player rotate-ani', { src: 'https://638183.freep.cn/638183/small/f02.png' }).playmp3();
        tz.fs().style('bottom: 20px');
</script>

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

小播构图：

小播使用 <img> 标签做成（代码 14 行）；通过CSS制定其样式（代码 04 行），核心是使用另一张图片做遮罩。

遮罩的关键属性请参阅 https://www.huachaowang.com/forum.php?mod=viewthread&tid=87834

马黑黑 发表于 2025-11-11 12:09

帖子如果需要进度条，可以考虑放在左下角：

tz.bgprog().style('bottom: 20px; left: 20px');

红影 发表于 2025-11-11 14:43

小播是用图图做的，然后被另一张图图遮罩了，就成了原来的花纹但遮罩图的样子{:4_187:}

红影 发表于 2025-11-11 14:44

黑黑的讲解后有实例对应，这样对学习来说真好，便于理解呢{:4_199:}

杨帆 发表于 2025-11-11 15:08

精彩效果，经典示范，谢谢马老师{:4_180:}

小辣椒 发表于 2025-11-11 20:19

哇塞，这个代码就这么几行，好像套用应该会速度一点吧{:4_170:}

小辣椒 发表于 2025-11-11 20:20

去套用一个看看效果，反正感觉实际以后就有点体会了

马黑黑 发表于 2025-11-11 21:19

红影 发表于 2025-11-11 14:43
小播是用图图做的，然后被另一张图图遮罩了，就成了原来的花纹但遮罩图的样子

这种做法此前有不少，现在是用在tzMaker里，道理其实一样

马黑黑 发表于 2025-11-11 21:20

红影 发表于 2025-11-11 14:44
黑黑的讲解后有实例对应，这样对学习来说真好，便于理解呢

mask过去讲过几次的，不过我一直把它当作 background 一样去使用，都是用简写法

马黑黑 发表于 2025-11-11 21:21

杨帆 发表于 2025-11-11 15:08
精彩效果，经典示范，谢谢马老师

{:4_190:}

马黑黑 发表于 2025-11-11 21:21

小辣椒 发表于 2025-11-11 20:19
哇塞，这个代码就这么几行，好像套用应该会速度一点吧

使用 tzMaker，如果没有特殊需求，代码都不会太多

马黑黑 发表于 2025-11-11 21:22

小辣椒 发表于 2025-11-11 20:20
去套用一个看看效果，反正感觉实际以后就有点体会了

关键是理解所使用的指令的意思、参数、配套指令技巧

红影 发表于 2025-11-12 22:38

马黑黑 发表于 2025-11-11 21:19
这种做法此前有不少，现在是用在tzMaker里，道理其实一样

是的，这个以前用过的，也是黑黑带着用的{:4_187:}

红影 发表于 2025-11-12 22:41

马黑黑 发表于 2025-11-11 21:20
mask过去讲过几次的，不过我一直把它当作 background 一样去使用，都是用简写法

遮罩总是带来很多惊艳的效果呢{:4_187:}

马黑黑 发表于 2025-11-12 22:50

红影 发表于 2025-11-12 22:38
是的，这个以前用过的，也是黑黑带着用的

用用都会的

马黑黑 发表于 2025-11-12 22:52

红影 发表于 2025-11-12 22:41
遮罩总是带来很多惊艳的效果呢

HTML最初总是基于矩形做设计，后来觉得全是矩形也不好，就开始有圆角，然后才慢慢的有切割、遮罩

朵拉 发表于 2025-11-13 22:39

精彩制作，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-11-13 22:43

朵拉 发表于 2025-11-13 22:39
精彩制作，学生已交作业，请老师指正

{:4_190:}
页: [1] 2
查看完整版本: 烬雪凌月-OC曲