Auto-Save
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/sea.webp') no-repeat center/cover; }
.player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: flash 0.5s infinite alternate, shake 1s infinite; }
@keyframes shake {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
const gc = `Chace : Auto-Save\n3 am in the city nights\nlike morse codes in my window in the seventh night\nIf I lose sleep will I find peace in the nick of time?\nIf I overthink I won't underestimate\nI've been living on a high wire\nTried to keep one foot in front of the other\nWeight of my desires on my back\nWill be the one, to pull me under\nWhat if I can't hold back the tide\nWho will I be when waters rise?\nIf I go down before my time\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nAnxiety is my remedy\nTo the clock hands still around my neck tryna strangle me\nIn the dead of night will I stay alive if I still believe?\nIf I overthink I won't underestimate\nI've been living on a high wire\nTried to keep one foot in front of the other\nWeight of my desires on my back\nWill be the one, to pull me under\nWhat if I can't hold back the tide\nWho will I be when waters rise?\nIf I go down before my time\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nWhat if I manifest the tide\nCould you be the one to save my life?\nMy life, my life, my life, my life\nWhat if I …\nWhat If I can't hold back the tide\nMy life, my life, my life, my life\nI think you're the one`;
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2724319224'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2414777/00/02/17/5b51a27b2a2e7.mp4'});
tz.lrc(tz.lrc2HC(gc), '', 1).style('top: 30px');
tz.add('img', '', 'player', {src: 'https://638183.freep.cn/638183/small/2025/uvmu.png'}).playmp3();
tz.bgprog().style('bottom: 20px; color: navy');
tz.fs().style('right: 20px; top: 20px; color: white');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/sea.webp') no-repeat center/cover; }
.player { position: absolute; width: 160px; bottom: 40px; cursor: pointer; animation: flash 0.5s infinite alternate, shake 1s infinite; }
@keyframes shake {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
const gc = `Chace : Auto-Save\n3 am in the city nights\nlike morse codes in my window in the seventh night\nIf I lose sleep will I find peace in the nick of time?\nIf I overthink I won't underestimate\nI've been living on a high wire\nTried to keep one foot in front of the other\nWeight of my desires on my back\nWill be the one, to pull me under\nWhat if I can't hold back the tide\nWho will I be when waters rise?\nIf I go down before my time\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nAnxiety is my remedy\nTo the clock hands still around my neck tryna strangle me\nIn the dead of night will I stay alive if I still believe?\nIf I overthink I won't underestimate\nI've been living on a high wire\nTried to keep one foot in front of the other\nWeight of my desires on my back\nWill be the one, to pull me under\nWhat if I can't hold back the tide\nWho will I be when waters rise?\nIf I go down before my time\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nMy life, my life, my life, my life\nWill somebody auto-save my life?\nWhat if I manifest the tide\nCould you be the one to save my life?\nMy life, my life, my life, my life\nWhat if I …\nWhat If I can't hold back the tide\nMy life, my life, my life, my life\nI think you're the one`;
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2724319224'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2414777/00/02/17/5b51a27b2a2e7.mp4'});
tz.lrc(tz.lrc2HC(gc), '', 1).style('top: 30px');
tz.add('img', '', 'player', {src: 'https://638183.freep.cn/638183/small/2025/uvmu.png'}).playmp3();
tz.bgprog().style('bottom: 20px; color: navy');
</script>
坐板凳欣赏哈！ 不一样的播放器，但非常简单，运行两个 CSS 关键帧动画：
一个是 tz.v4.css 预设的 flash；
另一个是帖子 CSS 代码设计的 shake 有趣，逼真的海底世界 代码简洁，内涵丰富 制作精致，效果惊艳 匠心独运，谢谢分享 不一样的播放器，一样的美妙体验，谢谢马老师精彩分享{:4_191:} 海底世界，用海姆做小播放器很有趣味，灵动。 杨帆厉害{:4_189:} 好有节奏感啊{:4_199:} 欣赏学习{:4_170:} 黑黑老师这一招灵光哦{:4_187:} 小九 发表于 2025-12-19 19:15
好有节奏感啊
{:4_190:} 梦江南 发表于 2025-12-19 18:46
坐板凳欣赏哈！
慢慢品茶{:4_190:} 杨帆 发表于 2025-12-19 18:54
有趣，逼真的海底世界
有点像吧？ 马黑黑 发表于 2025-12-19 19:49
有点像吧？
是，极具代入感呢{:4_172:} 杨帆 发表于 2025-12-19 20:05
是，极具代入感呢
{:4_191:} 我还留了一幅我儿子托儿所时候画的海底世界，找到了就套着组代码做一个，那个播放按钮随着节奏跳动，有趣
谢您分享，这一阵子收货与我而言感觉很理想，有师傅就是有方向，谢谢！