马黑黑 发表于 2025-11-4 20:26

Follow Your Heart（Instrumental）

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/heart.webp') no-repeat center/cover; }
        .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'); }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
        const tz = TZ.TZ('pa');
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=3312936520'});
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/27/5d1c46da8a9e4.mp4' });
        tz.add('div', 'player', 'wrap200 ma').playmp3();
        tz.lzRot(3, 'player', { className: 'petal', angle: 180, cc: true });
        tz.bgprog().style('bottom: 20px; color: #fff');
        tz.fs().style('bottom: 20px; left: 20px');
</script>

马黑黑 发表于 2025-11-4 20:27

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/heart.webp') no-repeat center/cover; }
    .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'); }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
    const tz = TZ.TZ('pa');
    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=3312936520'});
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/08/27/5d1c46da8a9e4.mp4' });
    tz.add('div', 'player', 'wrap200 ma').playmp3();
    tz.lzRot(3, 'player', { className: 'petal', angle: 180, cc: true });
    tz.bgprog().style('bottom: 20px; color: #fff');
    tz.fs().style('bottom: 20px; left: 20px');
</script>

马黑黑 发表于 2025-11-4 20:32

核心：小播路径设计

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

偶然~ 发表于 2025-11-4 20:59

制作大气

偶然~ 发表于 2025-11-4 20:59

音画唯美

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

下次偷去做个翻唱

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

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

小辣椒 发表于 2025-11-4 21:40

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

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

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

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

{:4_171:}

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

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

{:4_191:}

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

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

{:4_180:}

小辣椒 发表于 2025-11-4 21:43

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

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

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

{:4_172:}

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

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


{:4_180:}

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

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


{:4_171:}

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

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


谢花

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

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


谢茶

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

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

开心幸福

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

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

吉祥如意

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

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

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

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

.style(); // 补充内联CSS设置
页: [1] 2
查看完整版本: Follow Your Heart（Instrumental）