朵拉 发表于 2025-11-5 23:16

消失的憧憬（学习马黑黑Follow Your Heart效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/690b68d53203f7be00d82c7f.jpg') 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://cccimg.com/view.php/a2680711aafaa249ece748f78832d2c6.mp3'});
    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: 30px; color: #fff');
    tz.fs().style('bottom: 20px; left: 20px');
</script>

朵拉 发表于 2025-11-5 23:17

本帖最后由 朵拉 于 2025-11-5 23:18 编辑

@马黑黑
老师 晚上好，学生交作业~~
请教：播放器的位置 调整哪个语句？{:4_190:}

马黑黑 发表于 2025-11-5 23:18

{:4_199:}

朵拉 发表于 2025-11-5 23:19

马黑黑 发表于 2025-11-5 23:18


请教老师：播放器的位置 调整哪个语句{:4_190:}

马黑黑 发表于 2025-11-5 23:52

朵拉 发表于 2025-11-5 23:19
请教老师：播放器的位置 调整哪个语句

这一句，是播放器：

tz.add('div', 'player', 'wrap200 ma').playmp3();

可以使用后补指令 style('left: 20px; bottom: 20px'); 改变其位置：

tz.add('div', 'player', 'wrap200 ma').playmp3().style('left: 20px; bottom: 20px');

红影 发表于 2025-11-6 15:39

漂亮，欣赏朵宝好帖{:4_199:}

小辣椒 发表于 2025-11-7 21:59

朵拉做作业的速度真快{:4_199:}

小辣椒 发表于 2025-11-7 21:59

欣赏朵拉精彩制作{:4_171:}
页: [1]
查看完整版本: 消失的憧憬（学习马黑黑Follow Your Heart效果）