朵拉 发表于 2025-12-9 22:52

怎 么 了（学习马黑黑雨洛效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {--offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/69382c63f9354404e340f3ee.jpg') no-repeat center/cover;}
</style>

<div class="pa">
    <div id="player" class="wrap200" style="right: 20px; bottom: 20px">
      <svg id="msvg" width="200" height="200">
            <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
            <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
      </svg>
    </div>
</div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');
   
    tz.add('audio', '', '', {src: 'https://cccimg.com/view.php/cafdd8089c83c8a3684157955603be87.mp3'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/01/29/76/62a7571a73dc2.mp4'});
    tz.add('img', '', 'rot-ani', {
      src: 'https://638183.freep.cn/638183/small/2025/2501.webp',
      alt: '',
      style: 'width: 160px; clic-path: circle(40%); cursor: pointer'
    }).playmp3().to('player');
    tz.svgprog('msvg', 'track', 'prog');
    tz.fs().style('left: 20px; bottom: 20px; color: lightblue');
</script>

朵拉 发表于 2025-12-9 22:53

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

红影 发表于 2025-12-9 23:40

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

上海朝阳 发表于 2025-12-10 08:00

这小帅哥为谁这么淋着雨呀{:4_189:}

梦江南 发表于 2025-12-10 11:35

好漂亮的制作，欣赏点赞！{:4_199:}
页: [1]
查看完整版本: 怎 么 了（学习马黑黑雨洛效果）