朵拉 发表于 2025-10-9 20:02

【月满花潮庆华诞】Coolest（学习马黑黑Jaded效果）

<style>
      @import 'https://638183.freep.cn/638183/web/css/tz02.css';
      #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68e79ee3c5157e1a885fbb70.jpg') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
      #ma { right: 30px; bottom: 50px; }
      #prog { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, lightgreen var(--prg), grey 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://cccimg.com/view.php/42a286285c9ac98c9e75e5f2be44e4de.mp3';
      const mp4 = 'https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e914bc1e61.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-9 20:04

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2025-10-9 20:13

帖子做的很好，个性化层面需要努力

梦油 发表于 2025-10-9 20:51

欣赏佳作，问候朵拉。

樵歌 发表于 2025-10-9 21:15

光影像个极大的喇叭，很奇妙。{:4_199:}

红影 发表于 2025-10-9 22:58

漂亮，欣赏朵宝好帖{:4_187:}

小九 发表于 2025-10-12 20:04

很好听{:4_187:}
页: [1]
查看完整版本: 【月满花潮庆华诞】Coolest（学习马黑黑Jaded效果）