梦江南 发表于 2025-10-13 20:07

【月满花潮庆华诞】漂亮的小风车


<style>
      @import 'https://638183.freep.cn/638183/web/css/tz02.css';
      #pa { --offsetX: 81px; --bg: url('https://cccimg.com/view.php/c69604eeac9e573a9cd8347d1cb1d500.jpg') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; } top: 85%;   left: 250%;}

      #ma { right: 30px; bottom: 50px; }
      #prog { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, lightgreen var(--prg), green 0); border-radius: 5px; }
      #btnFs { right: 50px; top: 20px; color: snow; border-color: currentColor; }
      .vid { opacity: 0.9; }
</style>

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

<script type="module">
      import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'
      const tz = TZ.TZ('pa'); /* 参数为帖子容器id，放在小角引号里 */
      
      /* 准备音视频地址 */
      const mp3 = 'https://music.163.com/song/media/outer/url?id=2717679121';
      const mp4 = 'https://cccimg.com/view.php/7b0daa31e20448e2af223e75acd07320.mp4    ';

      /* 添加播放按钮 ：playmp3 表示音频联动管理交给按钮 */
      tz.add('div', 'ma', '', {title: 'Alt+X'}).playmp3();

      /* 添加音频 ：自动+循环播放，下面的音频同此设置 */
      tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''});

      /* 添加视频 ：muted 设为 false 启用视频声音 */
      tz.add('video', '', 'pd-vid vid', {src: mp4, autoplay: '', loop: '', muted: true});

      tz.bgprog(); /* 背景进度条 ：CSS设置有线性渐变背景和 --prg 变量 */

      tz.fs(); /* 全屏按钮 ：对应CSS选择器 #btnFs */
</script>

梦江南 发表于 2025-10-13 20:07

学习黑黑老师的Jaded（tzMaker.a应用演示。

红影 发表于 2025-10-13 20:41

的确很漂亮呢，欣赏江南好帖{:4_199:}

杨帆 发表于 2025-10-13 20:52

学的很快哇，谢谢分享{:4_204:}

梦江南 发表于 2025-10-14 07:37

红影 发表于 2025-10-13 20:41
的确很漂亮呢，欣赏江南好帖

问好影子，其实配的音乐不够贴切。{:4_204:}

梦江南 发表于 2025-10-14 07:39

杨帆 发表于 2025-10-13 20:52
学的很快哇，谢谢分享

问好杨帆，这是黑黑老师上几天的代码。谢谢欣赏，{:4_204:}

梦油 发表于 2025-10-14 09:29

“漂亮的小风车”几个字做得真好，切合主题。

梦江南 发表于 2025-10-14 10:34

梦油 发表于 2025-10-14 09:29
“漂亮的小风车”几个字做得真好，切合主题。

问好梦油，谢谢欣赏。{:5_108:}

梦油 发表于 2025-10-14 13:45

梦江南 发表于 2025-10-14 10:34
问好梦油，谢谢欣赏。

你真是一位难得的才女。

梦江南 发表于 2025-10-14 14:16

梦油 发表于 2025-10-14 13:45
你真是一位难得的才女。

夸得我直冒汗，惭愧！{:4_201:}

梦油 发表于 2025-10-14 16:33

梦江南 发表于 2025-10-14 14:16
夸得我直冒汗，惭愧！

这是你留给我的印象。

梦江南 发表于 2025-10-14 16:49

梦油 发表于 2025-10-14 16:33
这是你留给我的印象。

哇，被你这么说我都有点不好意思啦，记者同志。

梦油 发表于 2025-10-14 20:00

梦江南 发表于 2025-10-14 16:49
哇，被你这么说我都有点不好意思啦，记者同志。

实话实说。

梦江南 发表于 2025-10-15 14:09

梦油 发表于 2025-10-14 20:00
实话实说。

我给澜天回赠了宁波话朗读。你可以去听了，还请多指导。

梦油 发表于 2025-10-15 14:13

梦江南 发表于 2025-10-15 14:09
我给澜天回赠了宁波话朗读。你可以去听了，还请多指导。

好好好，俺听听江南的声音。
页: [1]
查看完整版本: 【月满花潮庆华诞】漂亮的小风车