梦江南 发表于 2025-10-17 08:20

【月满花潮庆华诞】想你的时候问月亮

本帖最后由 梦江南 于 2025-10-17 09:08 编辑 <br /><br /><style>
      @import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
      .pa { --offsetX: 81px; --bg: tan url('https://cccimg.com/view.php/90ce0eda64909bb2880514f33ec7d840.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://music.163.com/song/media/outer/url?id=2632792472'
      });

      /** 以下创建LRC歌词同步标签
            除left、top定位必须设置，其余可以缺省使用默认配置
            style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
            指令里面的内容需要分行写时使用反引号，写在一行可用单引号
      **/
      tz.lrc(geci).style(`
                left: 80%; /* 定位 : 必须 */
                top: 50px; /* 定位 : 必须 */
                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(20% - 70px); bottom: 20px; --prog: lightblue;');

      // 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
      tz.add('div', 'player', 'wrap100 rot-ani cursor', {
                title: 'Alt+X', style: 'left: 20%; 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>

梦江南 发表于 2025-10-17 08:25

鸣谢黑黑老师的《在雨中（tzMaker d.trial应用测试）》的代码。{:5_161:}

梦油 发表于 2025-10-17 09:48

欣赏精彩制作，问候江南早安。

梦江南 发表于 2025-10-17 10:10

梦油 发表于 2025-10-17 09:48
欣赏精彩制作，问候江南早安。

谢谢梦油沙发欣赏，问好！{:4_204:}

红影 发表于 2025-10-17 15:51

好漂亮的制作，这歌词同步还是双色的颜色，还有一根跟随线。小播也漂亮。
欣赏江南好帖{:4_199:}

红影 发表于 2025-10-17 15:52

这月下美人的背景图图和歌曲意境很吻合呢{:4_199:}

梦江南 发表于 2025-10-17 17:04

红影 发表于 2025-10-17 15:51
好漂亮的制作，这歌词同步还是双色的颜色，还有一根跟随线。小播也漂亮。
欣赏江南好帖

这是黑黑老师的代码，我是套用的。{:4_204:}

梦江南 发表于 2025-10-17 17:06

红影 发表于 2025-10-17 15:52
这月下美人的背景图图和歌曲意境很吻合呢

用歌词去作图的。谢谢影子欣赏。{:4_187:}

红影 发表于 2025-10-17 23:14

梦江南 发表于 2025-10-17 17:06
用歌词去作图的。谢谢影子欣赏。

嗯嗯，这样的图图最贴切了。{:4_204:}
页: [1]
查看完整版本: 【月满花潮庆华诞】想你的时候问月亮