醉美水芙蓉 发表于 2025-10-19 19:16:55

爱入青云

<style>
      @import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
      .pa { --offsetX: 81px; margin: 30px 0 40px calc(50% - 500px); --bg: tan url('https://bbs.cnzv.cc/up/upload/pic/12/20251019-6e9435c6804ea57d6ae46a8a0178c14c.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/2269348/00/17/44/5ec497a38f522.mp4'
      });

      // 加上音频
      tz.add('audio', '', '', {
                src: 'https://www.joy127.com/url/136239.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: 22%; width:50%; height: 3px;); bottom: 10%; --prog: DarkGray;');

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

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

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

klxf 发表于 2025-10-19 22:58:41

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

醉美水芙蓉 发表于 2025-10-20 17:22:39

klxf 发表于 2025-10-19 22:58
漂亮~谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 爱入青云