Follow Your Heart（Instrumental）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/heart.webp') no-repeat center/cover; }
   
4.     .petal { position: absolute; width: 100%; height: 100%; background: radial-gradient(red, var(--cc), purple); clip-path: path('M80 100 L100 0 L120 100 Q100 0, 80 100 L100 200 L 120 100 Q100 200, 80 100'); }
   
5. </style>
   
6. 
   
7. <div id="pa" class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
    
11.     const tz = TZ.TZ('pa');
    
12.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=3312936520'});
    
13.     tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/27/5d1c46da8a9e4.mp4' });
    
14.     tz.add('div', 'player', 'wrap200 ma').playmp3();
    
15.     tz.lzRot(3, 'player', { className: 'petal', angle: 180, cc: true });
    
16.     tz.bgprog().style('bottom: 20px; color: #fff');
    
17.     tz.fs().style('bottom: 20px; left: 20px');
    
18. </script>

复制代码

马黑黑

核心：小播路径设计

切割子元素使用 SVG path 路径，绝对路径，实打实的像素值，小播只能设置固定宽高尺寸。切割路径使用SVG的 L指令+Q指令构造，路径占位是子元素整体，子元素则占满父元素整体，因此，旋转的分割角度是 180 而非 360，这个很重要。

偶然~

制作大气

偶然~

音画唯美

偶然~

下次偷去做个翻唱

偶然~

感谢马老师带来的精彩，辛苦了！祝你开心幸福、阖家幸福！

小辣椒

偶然~ 发表于 2025-11-4 21:00
下次偷去做个翻唱

这个不用说偷的，黑黑老师本来就是分享给大家玩的

偶然~

小辣椒 发表于 2025-11-4 21:40
这个不用说偷的，黑黑老师本来就是分享给大家玩的

马黑黑

偶然~ 发表于 2025-11-4 20:59
制作大气

马黑黑

偶然~ 发表于 2025-11-4 21:00
感谢马老师带来的精彩，辛苦了！祝你开心幸福、阖家幸福！

小辣椒

看看就这么几行代码，想要自己的效果还得花点时间研究一下的

马黑黑

偶然~ 发表于 2025-11-4 21:00
下次偷去做个翻唱

偶然~

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

偶然~

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

马黑黑

偶然~ 发表于 2025-11-4 21:48

谢花

马黑黑

偶然~ 发表于 2025-11-4 21:48

谢茶

偶然~

马黑黑 发表于 2025-11-4 21:50
谢茶

开心幸福

偶然~

马黑黑 发表于 2025-11-4 21:49
谢花

吉祥如意

马黑黑

小辣椒 发表于 2025-11-4 21:43
看看就这么几行代码，想要自己的效果还得花点时间研究一下的

来来去去就这几个指令，常用到的：

tz.add(); // 加音频、视频、其他必要元素
tz.bgprog(); // 背景进度条
tz.lzRot(); // 一般做小播用
tz.fs(); // 全屏按钮

.style(); // 补充内联CSS设置