潮汐

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
   
3.     .pa { --bg: url('https://638183.freep.cn/638183/t24/w7/tide.webp') no-repeat center/cover; }
   
4.     #player { bottom: 20px; display: grid; place-items: center; }
   
5. </style>
   
6. 
   
7. <div class="pa">
   
8.     <div id="player" class="wrap200">
   
9.         <svg id="msvg" width="200" height="200">
   
10.             <circle id="track" cx="100" cy="100" r="90" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"></circle>
    
11.             <circle id="prog" cx="100" cy="100" r="90" fill="none" stroke="white" stroke-width="10"></circle>
    
12.         </svg>
    
13.     </div>
    
14. </div>
    
15. 
    
16. <script type="module">
    
17.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';
    
18. 
    
19.     const tz = TZ.TZ('pa');
    
20. 
    
21.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1923701079'});
    
22.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4'});
    
23.     tz.add('img', '', 'ma', {src: 'https://638183.freep.cn/638183/small/webp/whale.webp'})
    
24.         .style('width: 175px; height: 175px; clip-path: circle(40%); mix-blend-mode: multiply;')
    
25.         .to(player)
    
26.         .playmp3();
    
27.     tz.svgprog(msvg, track, prog);
    
28.     tz.fs().style('right: 20px; top: 20px;');
    
29.     tz.autoMid();
    
30. </script>

复制代码

霜染枫丹

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


感谢马老师分享，新春吉祥！！

                               
登录/注册后可看大图

霜染枫丹

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

小辣椒

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

小辣椒

现在就去套用一个，反正有现成的代码

小辣椒

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

红影

很气势恢弘的制作，欣赏黑黑好帖

马黑黑

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

耐心一点就成的

马黑黑

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

马黑黑

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