小辣椒 发表于 2026-2-6 21:10

奥斯卡金曲--此情可待 (学习黑黑记忆信笺播放器效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {margin: 130px 0 60px calc(50% - 475px);   url('https://wj.zp68.com/lxx/yunhua/2026/02/05/05.jpg') no-repeat center/cover; --ma-size: 12%; width: 1500; height: 814; }

#player { position: absolute; width: 40px; height: 60px; cursor: pointer;}
    #player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; border: 4px solid white; border-radius: 8px; animation: rotting var(--du) linear infinite var(--state); --deg: 360deg; --du: 1.2s; }
    #player::after { --deg: -360deg; --du: 1.2s; }
    @keyframes rotting { to { transform: rotate(var(--deg)); } }

</style>

<div class="pa"></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://xlaj.cn/assets/file/zp/20230912020911.mp3' });
    tz.add('video', '', 'vid', {src: 'https://wj.zp68.com/lxx/yunhua/2026/02/05/05.mp4'}).style('opacity: 9.5;');
   tz.add('div', 'player', '', { style: 'bottom: 60px;' }).playmp3();
    tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
    var gc = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];;
    tz.lrc(gc, '', false).style('left: 20%; top: 10%; font:normal 2.0em 隶书; color: #e9ebf2; z-index: 999; --c1: #68cafb; --c2: #e9ebf2;--border: 0');
    tz.fs().style('left: 20px; top: 20px;')
</script>

小辣椒 发表于 2026-2-6 21:13

@马黑黑

黑黑我电饭煲制作的，学习你的播放器代码制作一个，但我的双歌曲不能隔行显示，我加了隔行码没有用，歌词只能这样出来了，这个双歌词以前做过的，花潮歌词编辑器制作，以前是好的。

小辣椒 发表于 2026-2-6 21:13

感谢黑黑源码分享{:4_187:}

马黑黑 发表于 2026-2-6 21:43

小辣椒 发表于 2026-2-6 21:13
@马黑黑

黑黑我电饭煲制作的，学习你的播放器代码制作一个，但我的双歌曲不能隔行显示，我加了隔行码没 ...

tzMaker在封装的时候不考虑双行歌曲显示

小辣椒 发表于 2026-2-6 21:47

马黑黑 发表于 2026-2-6 21:43
tzMaker在封装的时候不考虑双行歌曲显示

那现在这样也是挺好的{:4_170:}

小辣椒 发表于 2026-2-6 21:47

马黑黑 发表于 2026-2-6 21:43
tzMaker在封装的时候不考虑双行歌曲显示

只是这个视频做的不够自然

马黑黑 发表于 2026-2-6 21:49

小辣椒 发表于 2026-2-6 21:47
只是这个视频做的不够自然

AI做得就是这个样子

马黑黑 发表于 2026-2-6 21:50

小辣椒 发表于 2026-2-6 21:47
那现在这样也是挺好的

还行吧。其实也没有必要翻译。

小辣椒 发表于 2026-2-6 21:52

马黑黑 发表于 2026-2-6 21:49
AI做得就是这个样子

是的，昨天做了几个都不是很满意

小辣椒 发表于 2026-2-6 21:53

马黑黑 发表于 2026-2-6 21:50
还行吧。其实也没有必要翻译。

我本来想去了的，后来看看图尺寸大就留着了

也曾年轻 发表于 2026-2-6 21:56

https://q0.itc.cn/q_70/images03/20240530/43d90702ea6246eeba49bb69a638119d.gif

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

也曾年轻 发表于 2026-2-6 21:56

问好老师，谢谢欣赏和支持{:4_187:}

马黑黑 发表于 2026-2-6 23:23

小辣椒 发表于 2026-2-6 21:53
我本来想去了的，后来看看图尺寸大就留着了

{:4_190:}

马黑黑 发表于 2026-2-6 23:24

小辣椒 发表于 2026-2-6 21:52
是的，昨天做了几个都不是很满意

可以了的

梦江南 发表于 2026-2-7 08:35

这帖的电饭煲制作的音画清新，可爱，配上这首外文歌曲，更觉精彩。{:4_187:}

梦江南 发表于 2026-2-7 08:36

欣赏学习了！{:4_199:}

樵歌 发表于 2026-2-7 19:47

嗯，看那个美女的头扭来扭去挺可爱的样纸。{:4_189:}

红影 发表于 2026-2-7 20:34

很漂亮的制作，欣赏亲爱的好帖{:4_187:}
页: [1]
查看完整版本: 奥斯卡金曲--此情可待 (学习黑黑记忆信笺播放器效果）