The Pilgrimage
<style>@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/5029.webp') no-repeat center/cover; width: 1536px; height: 867px; border-radius: 12px; }
.pd-vid { opacity: 1; mix-blend-mode: screen; transform: scale(-1, 1); }
.player { bottom: 50px; width: 6vw; }
.bgprog { bottom: 20px; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2700386310" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/small/2026/a4.png" class="player rotate hue-rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>
<script>
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js');
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = () => {
var tz = TZ('pa');
tz.start();
};
document.head.appendChild(script);
}
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/5029.webp') no-repeat center/cover; width: 1536px; height: 867px; border-radius: 12px; }
.pd-vid { opacity: 1; mix-blend-mode: screen; transform: scale(-1, 1); }
.player { bottom: 50px; width: 6vw; }
.bgprog { bottom: 20px; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2700386310" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/small/2026/a4.png" class="player rotate hue-rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>
<script>
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js');
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = () => {
var tz = TZ('pa');
tz.start();
};
document.head.appendChild(script);
}
</script>【说明】 .pa {} 选择器（03行）加入宽高属性（width、height）属性，这不是必须的，仅是示范。配套的 CSS 已经对 .pa 选择器做了相关CSS层叠样式设置，自适应宽高（即根据显示设备决定宽高尺寸）、宽高比例 16:9，支持做帖时锁定宽高。
代码极简，效果极炫，示范极酷{:4_191:} 很炫，创意十足，赞一个!{:5_116:} 代码简洁，逻辑清晰易读！ 无名 发表于 2026-3-27 12:23
很炫，创意十足，赞一个!
{:4_191:} 无名 发表于 2026-3-27 12:25
代码简洁，逻辑清晰易读！
{:4_180:} 杨帆 发表于 2026-3-27 11:45
代码极简，效果极炫，示范极酷
视频很重要
页:
[1]