论坛 › 动画音画 › Hungary - The Atomic Era (Cinege, cinege)

马黑黑 发表于 2026-2-23 19:45

Hungary - The Atomic Era (Cinege, cinege)

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
    .pa { --bg: url('https://638183.freep.cn/638183/t24/6/hungary.jpg') no-repeat center/cover; --ma-size: 12%;}
    .vid { width: 10vw; height: 10vw; border-radius: 50%; mix-blend-mode: screen; box-shadow: 5px 5px 10px white, -5px -5px 10px yellow; }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js?v=1';

    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1969513370' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4da1137698b.mp4' });
    tz.add('video', '', 'vid ma', {
            disablePictureInPicture: 'true',
            src: 'https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b5cc1237c.mp4'
      }).playmp3();
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
</script>

马黑黑 发表于 2026-2-23 19:46

帖子代码
<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
    .pa { --bg: url('https://638183.freep.cn/638183/t24/6/hungary.jpg') no-repeat center/cover; --ma-size: 12%;}
    .vid { width: 10vw; height: 10vw; border-radius: 50%; mix-blend-mode: screen; box-shadow: 5px 5px 10px white, -5px -5px 10px yellow; }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js?v=1';

    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1969513370' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4da1137698b.mp4' });
    tz.add('video', '', 'vid ma', {
            disablePictureInPicture: 'true',
            src: 'https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b5cc1237c.mp4'
      }).playmp3();
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
</script>

马黑黑 发表于 2026-2-23 19:51

CSS 变量 --ma-size（03行）可以不保留，因为视频小播（04行）重新规定了小播的尺寸。

视频小播同时使用两个 class，.vid 和 .ma（19行），ma 带来的效果是旋转以及鼠标指针样式。需要注意的是，.ma 选择器作用于视频很多层面受限，所以，.vid 的设置必不可少。tz.v5.css 层叠样式文档已经集成有 .vid 设置，帖子中只需设置必要的属性（以覆盖或重设相关属性值）。

马黑黑 发表于 2026-2-23 20:00

tz.v5 模块通过反复测试，现在应该进入优化阶段。由于测试环境有限，慢网环境下它的表现无从了解。花潮不快不慢，个人感觉v5的测试效果过得去。


极速打开本帖相同内容请访问：Hungary - The Atomic Era (Cinege, cinege)

可以对二者进行比较，以感知不同网络主机环境下 v5 的自居中性能。

我自己搭建有本地论坛（局域网论坛），v5 的自居中标签非常优秀。

一切都有关联，理论上的东东在现实世界会因为环境的细节不同而产生不同的效应。

红影 发表于 2026-2-23 20:08

通过这贴才知道匈牙利的国名和单词饥饿那么接近{:4_173:}
帖子里的建筑很奇特，和音乐风格十分相符。欣赏黑黑好帖{:4_187:}

红影 发表于 2026-2-23 20:09

“tz.v5 模块通过反复测试，现在应该进入优化阶段。”
黑黑辛苦了，花费那么多心思做出模块，还需要反复测试，并优化升级，太不容易{:4_204:}

霜染枫丹 发表于 2026-2-23 20:28

马老师晚上好！小播居中这个形式我挺喜欢的，我自己没想到。能够让小播为整体的有效元素。第一个您测居中的那个帖子，用于小播的视频带着大风声音，呼呼的刮{:4_173:}。这又给整体的运用添加了元素，这个模板可繁可简，绝对高达上。代码收藏了，会认真使用。
谢谢马老师！{:4_204:}{:4_190:}

小辣椒 发表于 2026-2-23 22:59

马黑黑 发表于 2026-2-23 20:00
tz.v5 模块通过反复测试，现在应该进入优化阶段。由于测试环境有限，慢网环境下它的表现无从了解。花潮不快 ...

黑黑，连续测试了几次了，辛苦的，喝咖啡{:4_190:}

马黑黑 发表于 2026-2-23 23:40

小辣椒 发表于 2026-2-23 22:59
黑黑，连续测试了几次了，辛苦的，喝咖啡

测试是最麻烦的事情

马黑黑 发表于 2026-2-23 23:40

霜染枫丹 发表于 2026-2-23 20:28
马老师晚上好！小播居中这个形式我挺喜欢的，我自己没想到。能够让小播为整体的有效元素。第一个您测居中的 ...

{:4_191:}

马黑黑 发表于 2026-2-23 23:41

红影 发表于 2026-2-23 20:09
“tz.v5 模块通过反复测试，现在应该进入优化阶段。”
黑黑辛苦了，花费那么多心思做出模块，还需要反复测 ...

手掌辛苦

马黑黑 发表于 2026-2-23 23:41

红影 发表于 2026-2-23 20:08
通过这贴才知道匈牙利的国名和单词饥饿那么接近
帖子里的建筑很奇特，和音乐风格十分相符。欣赏 ...

{:4_180:}

小辣椒 发表于 2026-2-23 23:57

马黑黑 发表于 2026-2-23 23:40
测试是最麻烦的事情

是啊，黑黑辛苦了，继续换个龙井茶喝喝{:4_170:}{:4_180:}

马黑黑 发表于 2026-2-24 11:20

小辣椒 发表于 2026-2-23 23:57
是啊，黑黑辛苦了，继续换个龙井茶喝喝

谢茶

红影 发表于 2026-2-24 20:00

马黑黑 发表于 2026-2-23 23:41
手掌辛苦

黑黑最辛苦{:4_187:}

红影 发表于 2026-2-24 20:01

马黑黑 发表于 2026-2-23 23:41


谢香茶{:4_187:}

马黑黑 发表于 2026-2-24 21:15

红影 发表于 2026-2-24 20:00
黑黑最辛苦

黑的辛苦点是应该的

杨帆 发表于 2026-2-25 17:42

马老师您辛苦了~热烈祝贺tz.v5 模块通过反复测试已进入优化阶段{:4_199:}{:4_199:}{:4_199:}

红影 发表于 2026-2-25 21:08

马黑黑 发表于 2026-2-24 21:15
黑的辛苦点是应该的

大家都感谢你{:4_187:}

朵拉 发表于 2026-2-25 21:22

老师创意十足，学生已交作业，请您指正{:4_190:}

查看完整版本: Hungary - The Atomic Era (Cinege, cinege)