A Quartet（四重奏）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
   
3.   .pa { --bg: url('https://638183.freep.cn/638183/t24/6/qcen.jpg') no-repeat center/cover; }
   
4.   .mlist { left: 30px; bottom: 10px; background: rgba(0,0,0,.15); backdrop-filter: blur(10px); }
   
5.   .player { top: 5%; border-radius: 50%; box-shadow: 0 0 16px rgba(0,0,0,.5); filter: invert(1); opacity: .35; transition: .5s; }
   
6.   .player:hover { filter: unset; }
   
7.   .bgprog { bottom: 20px; color: lightblue; }
   
8.   .btnFs { right: 30px; top: 30px; color: lightblue; }
   
9.   .pd-vid { mix-blend-mode: screen; opacity: 1; }
   
10. </style>
    
11. 
    
12. <div class="pa">
    
13.   <audio></audio>
    
14.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
    
15.   <ol class="mlist"></ol>
    
16.   <img src="https://638183.freep.cn/638183/t24/6/qs.jpg" class="player rotate" title="Alt+X" alt="">
    
17.   <div class="bgprog"></div>
    
18.   <div class="btnFs" title="F11"></div>
    
19. </div>
    
20. 
    
21. <script>
    
22.   var musics = [
    
23.     ['https://music.163.com/song/media/outer/url?id=2057415380', 'Dancing Soul - 舞动的灵魂'],
    
24.     ['https://music.163.com/song/media/outer/url?id=2057417727', 'Queen\'s Speech - 女王致辞'],
    
25.     ['https://music.163.com/song/media/outer/url?id=2057415381', 'From the Clouds - 来自云端'],
    
26.     ['https://music.163.com/song/media/outer/url?id=2057415382', 'Spread Wings - 展翅'],
    
27.     ['https://music.163.com/song/media/outer/url?id=2057415383', 'Marching East - 东进']
    
28.   ];
    
29. 
    
30.   loadJs('https://638183.freep.cn/638183/tzmaker/tz2026m.js', tzInit);
    
31. 
    
32.   function loadJs(url, callback) {
    
33.     var script = document.createElement('script');
    
34.     script.charset = 'utf-8';
    
35.     script.src = url;
    
36.     script.defer = true;
    
37.     script.onload = callback;
    
38.     document.head.appendChild(script);
    
39.   }
    
40. 
    
41.   function tzInit() {
    
42.     var tz = TZ('pa', musics);
    
43.     tz.start();
    
44.   }
    
45. </script>

复制代码

马黑黑

24行 ：

歌名中有小角引号（英文分隔符） , 所以在其前面加一个转义符号 \ （反斜杠）。也可以改用双引号组织歌名，这样分隔符就不用做额外处理。

梦江南

黑黑老师，这个是音乐专辑的代码，赞哦！

马黑黑

给小播（.player 选择器）加一个 opacity 属性设置，值随意，酱紫小播就不会自动隐藏。这是 tz2026(m) 插件的旁门小技巧。

马黑黑

小播图案提取自专辑封面

马黑黑

梦江南 发表于 2026-4-14 12:24
黑黑老师，这个是音乐专辑的代码，赞哦！

代码是音画帖快手生成

梦江南

马黑黑 发表于 2026-4-14 12:29
代码是音画帖快手生成

哦，这个没试过。

马黑黑

梦江南 发表于 2026-4-14 12:30
哦，这个没试过。

音画帖快手是代码形式的工具，还是需要具备一定的 CSS、HTML、JS 知识，以便修改相应代码

山人

欧耶

杨帆

代码简洁，内容丰富，效果精彩，谢谢马老师经典示范

马黑黑

杨帆 发表于 2026-4-14 13:36
代码简洁，内容丰富，效果精彩，谢谢马老师经典示范