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> 帖子代码
<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> CSS 变量 --ma-size(03行)可以不保留,因为视频小播(04行)重新规定了小播的尺寸。
视频小播同时使用两个 class,.vid 和 .ma(19行),ma 带来的效果是旋转以及鼠标指针样式。需要注意的是,.ma 选择器作用于视频很多层面受限,所以,.vid 的设置必不可少。tz.v5.css 层叠样式文档已经集成有 .vid 设置,帖子中只需设置必要的属性(以覆盖或重设相关属性值)。 tz.v5 模块通过反复测试,现在应该进入优化阶段。由于测试环境有限,慢网环境下它的表现无从了解。花潮不快不慢,个人感觉v5的测试效果过得去。
极速打开本帖相同内容请访问:Hungary - The Atomic Era (Cinege, cinege)
可以对二者进行比较,以感知不同网络主机环境下 v5 的自居中性能。
我自己搭建有本地论坛(局域网论坛),v5 的自居中标签非常优秀。
一切都有关联,理论上的东东在现实世界会因为环境的细节不同而产生不同的效应。
通过这贴才知道匈牙利的国名和单词饥饿那么接近{:4_173:}
帖子里的建筑很奇特,和音乐风格十分相符。欣赏黑黑好帖{:4_187:} “tz.v5 模块通过反复测试,现在应该进入优化阶段。”
黑黑辛苦了,花费那么多心思做出模块,还需要反复测试,并优化升级,太不容易{:4_204:} 马老师晚上好!小播居中这个形式我挺喜欢的,我自己没想到。能够让小播为整体的有效元素。第一个您测居中的那个帖子,用于小播的视频带着大风声音,呼呼的刮{:4_173:}。这又给整体的运用添加了元素,这个模板可繁可简,绝对高达上。代码收藏了,会认真使用。
谢谢马老师!{:4_204:}{:4_190:}
马黑黑 发表于 2026-2-23 20:00
tz.v5 模块通过反复测试,现在应该进入优化阶段。由于测试环境有限,慢网环境下它的表现无从了解。花潮不快 ...
黑黑,连续测试了几次了,辛苦的,喝咖啡{:4_190:} 小辣椒 发表于 2026-2-23 22:59
黑黑,连续测试了几次了,辛苦的,喝咖啡
测试是最麻烦的事情 霜染枫丹 发表于 2026-2-23 20:28
马老师晚上好!小播居中这个形式我挺喜欢的,我自己没想到。能够让小播为整体的有效元素。第一个您测居中的 ...
{:4_191:} 红影 发表于 2026-2-23 20:09
“tz.v5 模块通过反复测试,现在应该进入优化阶段。”
黑黑辛苦了,花费那么多心思做出模块,还需要反复测 ...
手掌辛苦 红影 发表于 2026-2-23 20:08
通过这贴才知道匈牙利的国名和单词饥饿那么接近
帖子里的建筑很奇特,和音乐风格十分相符。欣赏 ...
{:4_180:} 马黑黑 发表于 2026-2-23 23:40
测试是最麻烦的事情
是啊,黑黑辛苦了,继续换个龙井茶喝喝{:4_170:}{:4_180:} 小辣椒 发表于 2026-2-23 23:57
是啊,黑黑辛苦了,继续换个龙井茶喝喝
谢茶 马黑黑 发表于 2026-2-23 23:41
手掌辛苦
黑黑最辛苦{:4_187:} 马黑黑 发表于 2026-2-23 23:41
谢香茶{:4_187:} 红影 发表于 2026-2-24 20:00
黑黑最辛苦
黑的辛苦点是应该的 马老师您辛苦了~热烈祝贺tz.v5 模块通过反复测试已进入优化阶段{:4_199:}{:4_199:}{:4_199:} 马黑黑 发表于 2026-2-24 21:15
黑的辛苦点是应该的
大家都感谢你{:4_187:} 老师创意十足,学生已交作业,请您指正{:4_190:}
页:
[1]
2