醉美水芙蓉 发表于 2025-10-15 22:34:57

半生风光


<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
        .pa { --offsetX: 0px; --bg: tan url('https://bbs.cnzv.cc/up/upload/pic/12/20251015-7cc076cf08df20f4f0278dcd5126822f.jpg') no-repeat center/cover; --ma-size: 3vw; }
        /* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
        .rect { width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>

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

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

        // 歌词（花朝格式）
        let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

        // 大熊视频
        tz.add('video', '', 'pd-vid', {
                src: 'https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4'
        });

        // 加上音频
        tz.add('audio', '', '', {
                src: 'https://www.joy127.com/url/136040.mp3'
        });

        /** 以下创建LRC歌词同步标签
          除left、top定位必须设置，其余可以缺省使用默认配置
          style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
          指令里面的内容需要分行写时使用反引号，写在一行可用单引号
        **/
        tz.lrc(geci).style(`
                left: 20px; /* 定位 : 必须 */
                top: 20px; /* 定位 : 必须 */
                color: silver; /* 前景色 : 可选（默认wheat）*/
                writing-mode: vertical-lr;/* 排版方向 : 可选（默认横向）*/
                --rect: 0 0 100% 0; /* 排版方向配套属性 : 可选（默认0 100% 0 0）*/
                --c1: white; /* 渐变颜色1 : 可选（默认橙色）*/
                --c2: cyan; /* 渐变颜色2 : 可选（默认黄色）*/
                --deg: to left;/* 渐变角度或方向 : 可选（默认180deg）*/
                --border: 0 1px 0 0;/* 同步线条 : 可选（默认0 0 1px 0）*/
        `);

        // 创建进度条 : 设置位置和进度颜色
        tz.bgprog().style('left: calc(30% - 70px); bottom: 20px; --prog: lightblue;');

        // 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
        tz.add('div', 'player', 'wrap100 rot-ani cursor', {
                title: 'Alt+X', style: 'left: 30%; bottom: 50px; place-items: start center;'
        }).playmp3();

        // 小播内部零件装进 id="player" 标签
        tz.lzRot(8, 'player', {className: 'rect'});

        // 全屏 : 并设置定位和颜色
        tz.fs().style('top: 20px; right: 20px; color: lightblue;');
</script>

klxf 发表于 2025-10-16 16:06:51

漂亮！谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2025-10-16 17:35:56

klxf 发表于 2025-10-16 16:06
漂亮！谢谢醉美管理员精彩分享

谢谢友友支持！

atykyvu 发表于 2025-10-17 13:08:14

赞，顶帖真的太精彩啦

quantouzhenqing 发表于 2025-10-22 04:11:47

赞，顶帖思路非常新颖
页: [1]
查看完整版本: 半生风光