烬雪凌月-OC曲

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/jxly.webp') no-repeat center/cover; }
   
4.         .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; }
   
5. </style>
   
6. 
   
7. <div class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
11.         const tz = TZ.TZ('pa');
    
12.         tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2733351771'});
    
13.         tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2402760/00/01/64/5b4744b57baf0.mp4' });
    
14.         tz.add('img', '', 'player rotate-ani', { src: 'https://638183.freep.cn/638183/small/f02.png' }).playmp3();
    
15.         tz.fs().style('bottom: 20px');
    
16. </script>

复制代码

马黑黑

小播构图：

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

遮罩的关键属性请参阅 https://www.huachaowang.com/foru ... hread&tid=87834

马黑黑

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

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

红影

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

红影

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

杨帆

精彩效果，经典示范，谢谢马老师

小辣椒

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

小辣椒

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

马黑黑

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

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

马黑黑

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

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

红影

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

是的，这个以前用过的，也是黑黑带着用的

红影

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

遮罩总是带来很多惊艳的效果呢

马黑黑

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

用用都会的

马黑黑

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

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

朵拉

精彩制作，学生已交作业，请老师指正

马黑黑

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