马黑黑 发表于 2025-10-23 08:05

暗之恶魔登场印象

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
        .pa { --offsetX: 81px; --bg: url('https://pic.biubiu001.com/gamebase/gamedb/res/20241103/14/14/1f33790b443c9c91bc303075a6b17ab7.jpeg') center/cover; }
        .fan { position: absolute; width: 100%; height: 100%; background: var(--cc); clip-path: path('M50 50 L30 20 Q50 -10,70 20 L50 50'); }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
        const tz = TZ.TZ('pa');

        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1493815472'});
        tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4da1137698b.mp4'});
        tz.bgprog().style('right: 60px; bottom: 180px; transform: rotate(-81deg) ; color: snow; --prog: snow;');
        tz.fs().style('bottom: 20px; right: 20px;');
        tz.add('div', 'player', '', {class: 'wrap100 ma hue-rotate'});
        tz.lzRot(5, 'player', {className: 'fan', cc: 'linear-gradient(plum, darkred)'}).playmp3().style('bottom: 40px;');
</script>

马黑黑 发表于 2025-10-23 08:06

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
    .pa { --offsetX: 0px; --bg: url('https://pic.biubiu001.com/gamebase/gamedb/res/20241103/14/14/1f33790b443c9c91bc303075a6b17ab7.jpeg') center/cover; }
    .fan { position: absolute; width: 100%; height: 100%; background: var(--cc); clip-path: path('M50 50 L30 20 Q50 -10,70 20 L50 50'); }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
    const tz = TZ.TZ('pa');
    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1493815472'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4da1137698b.mp4'});
    tz.bgprog().style('right: 60px; bottom: 180px; transform: rotate(-81deg) ; color: snow; --prog: snow;');
    tz.fs().style('bottom: 20px; right: 20px;');
    tz.add('div', 'player', '', {class: 'wrap100 ma hue-rotate'});
    tz.lzRot(5, 'player', {className: 'fan', cc: 'linear-gradient(plum, darkred)'}).playmp3().style('bottom: 40px;');
</script>

马黑黑 发表于 2025-10-23 08:12

使用 tzMaker.e 发帖可以充分利用 style('css代码') 指令对创建的元素做补充设置，最常见的是安排位置。这样可以令CSS代码少很多。当然，如果需要复杂的CSS设置，另当别论，style() 指令主要适合CSS代码不多的情形，太多的话从结构上看代码有失衡的感觉（虽然不会影响指令的执行）。

马黑黑 发表于 2025-10-23 08:13

二楼提供的代码，03行应该是 81px，不改原楼了

梦江南 发表于 2025-10-23 09:28

小播漂亮，进度条像剑一样斜立在旁边，音乐像在念拼音字母。{:4_199:}

红影 发表于 2025-10-23 19:11

音乐有点恐怖啊{:4_173:}
这小播制作真漂亮，在这样的背景里恰如其分{:4_187:}

红影 发表于 2025-10-23 19:13

给进度条转了个角度，也漂亮呢，和背景的分割线角度一致。
这个视频选择又是很奇妙。漂亮{:4_199:}

绿叶清舟 发表于 2025-10-23 21:11

tzMaker.e又是啥新东东

朵拉 发表于 2025-10-23 21:36

效果漂亮，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-10-23 21:56

朵拉 发表于 2025-10-23 21:36
效果漂亮，学生已交作业，请老师指正

{:4_199:}

马黑黑 发表于 2025-10-23 21:57

梦江南 发表于 2025-10-23 09:28
小播漂亮，进度条像剑一样斜立在旁边，音乐像在念拼音字母。

{:4_196:}

马黑黑 发表于 2025-10-23 21:57

红影 发表于 2025-10-23 19:11
音乐有点恐怖啊
这小播制作真漂亮，在这样的背景里恰如其分

这是专门设计的

马黑黑 发表于 2025-10-23 21:58

红影 发表于 2025-10-23 19:13
给进度条转了个角度，也漂亮呢，和背景的分割线角度一致。
这个视频选择又是很奇妙。漂亮

感谢感谢

马黑黑 发表于 2025-10-23 21:59

绿叶清舟 发表于 2025-10-23 21:11
tzMaker.e又是啥新东东

做帖工具。如果愿意接受，花点时间熟悉一下指令，音画帖基本通杀

红影 发表于 2025-10-23 23:08

马黑黑 发表于 2025-10-23 21:57
这是专门设计的

漂亮，黑黑思维灵活{:4_187:}

红影 发表于 2025-10-23 23:09

马黑黑 发表于 2025-10-23 21:58
感谢感谢

又是个启发，进度条是可以加入角度的。

马黑黑 发表于 2025-10-24 12:33

红影 发表于 2025-10-23 23:09
又是个启发，进度条是可以加入角度的。

以前有做过的吧

马黑黑 发表于 2025-10-24 12:33

红影 发表于 2025-10-23 23:08
漂亮，黑黑思维灵活

一般般

红影 发表于 2025-10-24 23:12

马黑黑 发表于 2025-10-24 12:33
以前有做过的吧

是的，还有完全垂直的{:4_204:}

红影 发表于 2025-10-24 23:13

马黑黑 发表于 2025-10-24 12:33
一般般

路径变一下，就是新的小播呢{:4_187:}
页: [1] 2 3 4
查看完整版本: 暗之恶魔登场印象