Auto-Save

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/sea.webp') no-repeat center/cover; }
   
4.     .player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: flash 0.5s infinite alternate, shake 1s infinite; }
   
5.     @keyframes shake {
   
6.         from { transform: rotate(-10deg); }
   
7.         to { transform: rotate(10deg); }
   
8.     }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa"></div>
    
12. 
    
13. <script type="module">
    
14.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    
15.     const tz = TZ.TZ('pa');
    
16.    
    
17.     const gc = `[00:00.90]Chace : Auto-Save\n[00:24.07]3 am in the city nights\n[00:26.87]like morse codes in my window in the seventh night\n[00:30.95]If I lose sleep will I find peace in the nick of time?\n[00:34.86]If I overthink I won't underestimate\n[00:39.41]I've been living on a high wire\n[00:43.23]Tried to keep one foot in front of the other\n[00:48.05]Weight of my desires on my back\n[00:52.55]Will be the one, to pull me under\n[00:57.37]What if I can't hold back the tide\n[01:01.19]Who will I be when waters rise?\n[01:05.14]If I go down before my time\n[01:09.08]Will somebody auto-save my life?\n[01:12.82]My life, my life, my life, my life\n[01:16.88]Will somebody auto-save my life?\n[01:20.59]My life, my life, my life, my life\n[01:25.07]Will somebody auto-save my life?\n[01:36.16]Anxiety is my remedy\n[01:38.92]To the clock hands still around my neck tryna strangle me\n[01:42.93]In the dead of night will I stay alive if I still believe?\n[01:47.00]If I overthink I won't underestimate\n[01:51.65]I've been living on a high wire\n[01:55.26]Tried to keep one foot in front of the other\n[02:00.12]Weight of my desires on my back\n[02:04.59]Will be the one, to pull me under\n[02:09.06]What if I can't hold back the tide\n[02:13.19]Who will I be when waters rise?\n[02:17.21]If I go down before my time\n[02:21.08]Will somebody auto-save my life?\n[02:24.58]My life, my life, my life, my life\n[02:29.12]Will somebody auto-save my life?\n[02:32.67]My life, my life, my life, my life\n[02:37.00]Will somebody auto-save my life?\n[02:49.19]What if I manifest the tide\n[02:52.87]Could you be the one to save my life?\n[02:56.68]My life, my life, my life, my life\n[03:02.30]What if I …\n[03:13.97]What If I can't hold back the tide\n[03:19.82]My life, my life, my life, my life\n[03:26.23]I think you're the one`;
    
18.    
    
19.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2724319224'});
    
20.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2414777/00/02/17/5b51a27b2a2e7.mp4'});
    
21.     tz.lrc(tz.lrc2HC(gc), '', 1).style('top: 30px');
    
22.     tz.add('img', '', 'player', {src: 'https://638183.freep.cn/638183/small/2025/uvmu.png'}).playmp3();
    
23.     tz.bgprog().style('bottom: 20px; color: navy');
    
24. </script>

复制代码

梦江南

坐板凳欣赏哈！

马黑黑

不一样的播放器，但非常简单，运行两个 CSS 关键帧动画：

一个是 tz.v4.css 预设的 flash；
另一个是帖子 CSS 代码设计的 shake

杨帆

有趣，逼真的海底世界

杨帆

代码简洁，内涵丰富

杨帆

制作精致，效果惊艳

杨帆

匠心独运，谢谢分享

杨帆

不一样的播放器，一样的美妙体验，谢谢马老师精彩分享

梦江南

海底世界，用海姆做小播放器很有趣味，灵动。

梦江南

杨帆厉害

小九

好有节奏感啊

梦江南

欣赏学习

梦江南

黑黑老师这一招灵光哦

马黑黑

小九 发表于 2025-12-19 19:15
好有节奏感啊

马黑黑

梦江南 发表于 2025-12-19 18:46
坐板凳欣赏哈！

慢慢品茶

马黑黑

杨帆 发表于 2025-12-19 18:54
有趣，逼真的海底世界

有点像吧？

杨帆

马黑黑 发表于 2025-12-19 19:49
有点像吧？

是，极具代入感呢

马黑黑

杨帆 发表于 2025-12-19 20:05
是，极具代入感呢

霜染枫丹

我还留了一幅我儿子托儿所时候画的海底世界，找到了就套着组代码做一个，那个播放按钮随着节奏跳动，有趣

谢您分享，这一阵子收货与我而言感觉很理想，有师傅就是有方向，谢谢！