马黑黑 发表于 2026-3-27 07:25

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>

马黑黑 发表于 2026-3-27 07:31

帖子代码

<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，支持做帖时锁定宽高。

杨帆 发表于 2026-3-27 11:45

代码极简，效果极炫，示范极酷{:4_191:}

无名 发表于 2026-3-27 12:23

很炫，创意十足，赞一个!{:5_116:}

无名 发表于 2026-3-27 12:25

代码简洁，逻辑清晰易读！

马黑黑 发表于 2026-3-27 12:52

无名 发表于 2026-3-27 12:23
很炫，创意十足，赞一个!

{:4_191:}

马黑黑 发表于 2026-3-27 12:52

无名 发表于 2026-3-27 12:25
代码简洁，逻辑清晰易读！

{:4_180:}

马黑黑 发表于 2026-3-27 12:53

杨帆 发表于 2026-3-27 11:45
代码极简，效果极炫，示范极酷

视频很重要

红影 发表于 2026-3-27 16:00

其实还是不要自己设置，自适应宽高才是最好的{:4_187:}

红影 发表于 2026-3-27 16:00

这个制作真漂亮{:4_199:}

姚云裳 发表于 2026-3-27 17:11

这个特效好了炫，真漂亮

马黑黑 发表于 2026-3-27 17:27

姚云裳 发表于 2026-3-27 17:11
这个特效好了炫，真漂亮

感谢支持！下午好！

马黑黑 发表于 2026-3-27 17:27

红影 发表于 2026-3-27 16:00
这个制作真漂亮

谢谢！{:4_190:}

马黑黑 发表于 2026-3-27 17:30

红影 发表于 2026-3-27 16:00
其实还是不要自己设置，自适应宽高才是最好的

有时候有特殊需求也是可以自定义的，比如 @小辣椒 有追求唯美情结，图片必须得按原始宽高比例呈现，为此她经常纠结“全屏按钮”怎么藏起来 {:4_170:}

樵歌 发表于 2026-3-28 10:34

下面是神马天材地宝呀，放出万道毫光。。。。{:4_181:}

樵歌 发表于 2026-3-28 10:35

赶紧抢呵，{:4_173:}

樵歌 发表于 2026-3-28 10:36

到底花落谁家

樵歌 发表于 2026-3-28 10:36

俺修为太低，不敢上前

樵歌 发表于 2026-3-28 10:37

围观吃瓜

马黑黑 发表于 2026-3-28 11:52

樵歌 发表于 2026-3-28 10:37
围观吃瓜

吃瓜快乐
页: [1] 2 3 4
查看完整版本: The Pilgrimage