马黑黑 发表于 2026-2-17 19:56

潮汐

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
    .pa { --bg: url('https://638183.freep.cn/638183/t24/w7/tide.webp') no-repeat center/cover; }
    #player { bottom: 20px; display: grid; place-items: center; }
</style>

<div class="pa">
    <div id="player" class="wrap200">
      <svg id="msvg" width="200" height="200">
            <circle id="track" cx="100" cy="100" r="90" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"></circle>
            <circle id="prog" cx="100" cy="100" r="90" fill="none" stroke="white" stroke-width="10"></circle>
      </svg>
    </div>
</div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';

    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1923701079'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4'});
    tz.add('img', '', 'ma', {src: 'https://638183.freep.cn/638183/small/webp/whale.webp'})
      .style('width: 175px; height: 175px; clip-path: circle(40%); mix-blend-mode: multiply;')
      .to(player)
      .playmp3();
    tz.svgprog(msvg, track, prog);
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
</script>

马黑黑 发表于 2026-2-17 19:56

帖子代码
<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
    .pa { --bg: url('https://638183.freep.cn/638183/t24/w7/tide.webp') no-repeat center/cover; }
    #player { bottom: 20px; display: grid; place-items: center; }
</style>

<div class="pa">
    <div id="player" class="wrap200">
      <svg id="msvg" width="200" height="200">
            <circle id="track" cx="100" cy="100" r="90" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"></circle>
            <circle id="prog" cx="100" cy="100" r="90" fill="none" stroke="white" stroke-width="10"></circle>
      </svg>
    </div>
</div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';

    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1923701079'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4'});
    tz.add('img', '', 'ma', {src: 'https://638183.freep.cn/638183/small/webp/whale.webp'})
      .style('width: 175px; height: 175px; clip-path: circle(40%); mix-blend-mode: multiply;')
      .to(player)
      .playmp3();
    tz.svgprog(msvg, track, prog);
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
</script>

霜染枫丹 发表于 2026-2-17 21:19

马老师过年好！水珠下滑入水的动作和涟漪很漂亮，小播的那条鱼造型为鲲鹏中的鲲，和涟漪和背景图片呼应，于简洁之中蕴含恢宏，这样的画面很有气势。我挺有触动的，认识到在播放器种画面尽量用减法，但作起来还是花哨的元素影响了主线。


感谢马老师分享，新春吉祥！！
https://www.yueyijyw.com/data/attachment/forum/202602/17/130621cavzytdsg8ws4dbx.jpg

霜染枫丹 发表于 2026-2-17 21:32

我很清楚的记得第一次听《潮汐》的感觉，乱糟糟的声音带给我的并不违和，还有一种力量感。多听了几遍之后，似乎加深了理解，就像马老师的画面：大海，表面永远波涛汹涌（乱），但其洋流、其存在本身（整体），就是宇宙间最伟大的秩序之一。更深刻的我说不好{:4_204:}{:4_190:}

小辣椒 发表于 2026-2-17 21:56

黑黑这个是新的电饭煲制作的吗？

小辣椒 发表于 2026-2-17 21:57

现在就去套用一个，反正有现成的代码{:4_170:}

小辣椒 发表于 2026-2-17 22:06

黑黑电饭煲测试不成功，只能套用了

红影 发表于 2026-2-17 23:11

很气势恢弘的制作，欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-2-17 23:51

小辣椒 发表于 2026-2-17 22:06
黑黑电饭煲测试不成功，只能套用了

耐心一点就成的

马黑黑 发表于 2026-2-17 23:51

霜染枫丹 发表于 2026-2-17 21:32
我很清楚的记得第一次听《潮汐》的感觉，乱糟糟的声音带给我的并不违和，还有一种力量感。多听了几遍之后， ...

{:4_180:}

马黑黑 发表于 2026-2-17 23:52

红影 发表于 2026-2-17 23:11
很气势恢弘的制作，欣赏黑黑好帖

{:4_190:}

梦江南 发表于 2026-2-18 09:27

黑黑老师新年好！赞一个！{:4_187:}

马黑黑 发表于 2026-2-18 13:14

梦江南 发表于 2026-2-18 09:27
黑黑老师新年好！赞一个！

{:4_180:}

朵拉 发表于 2026-2-21 22:48

老师创意十足，学生已交作业（花潮贺岁），请您指正{:4_190:}

马黑黑 发表于 2026-2-21 23:05

朵拉 发表于 2026-2-21 22:48
老师创意十足，学生已交作业（花潮贺岁），请您指正

{:4_190:}
页: [1]
查看完整版本: 潮汐