牵丝戏

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css?v1';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qsx.webp') no-repeat center/cover; }
   
4.     .fadeInLrc { right: 20%; }
   
5.     .char { display: block; }
   
6. </style>
   
7. 
   
8. <div class="pa"></div>
   
9. 
   
10. <script type="module">
    
11.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    
12.     const tz = TZ.TZ('pa');
    
13.    
    
14.     const hcLrc = tz.lrc2HC(`[00:00.200]牵丝线·银临&阿杰\n[00:23.650]嘲笑谁恃美扬威\n[00:29.650]没了心如何相配\n[00:34.500]盘铃声清脆 帷幕间灯火幽微\n[00:40.200]我和你 最天生一对\n[00:46.250]没了你才算原罪 没了心才好相配\n[00:56.839]你褴褛我彩绘 并肩行过山与水\n[01:02.439]你憔悴 我替你明媚\n[01:07.900]是你吻开笔墨 染我眼角珠泪\n[01:13.388]演离合相遇悲喜为谁\n[01:18.688]他们迂回误会 我却只由你支配\n[01:24.409]问世间哪有更完美\n[01:29.870]兰花指捻红尘似水\n[01:35.370]三尺红台 万事入歌吹\n[01:40.938]唱别久悲不成悲 十分红处竟成灰\n[01:46.900]愿谁记得谁 最好的年岁\n[02:15.306]你一牵我舞如飞 你一引我懂进退\n[02:26.235]苦乐都跟随 举手投足不违背\n[02:31.663]将谦卑 温柔成绝对\n[02:37.408]你错我不肯对 你懵懂我蒙昧\n[02:42.866]心火怎甘心扬汤止沸\n[02:48.128]你枯我不曾萎 你倦我也不敢累\n[02:53.967]用什么暖你一千岁\n[02:59.262]风雪依稀秋白发尾\n[03:04.943]灯火葳蕤 揉皱你眼眉\n[03:10.455]假如你舍一滴泪 假如老去我能陪\n[03:16.435]烟波里成灰 也去得完美\n[03:21.515]风雪依稀秋白发尾\n[03:27.193]灯火葳蕤 揉皱你眼眉\n[03:32.628]假如你舍一滴泪 假如老去我能陪\n[03:38.658]烟波里成灰 也去得完美`);
    
15.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=30352891'});
    
16.     tz.lrc(hcLrc, '', true);
    
17.     tz.add('div', 'player', 'wrap200', {style: 'bottom: 20px'});
    
18.     tz.add('svg', 'msvg', '', {width: 200, height: 200}).to('player');
    
19.     tz.svgson('msvg', 'circle', {id: 'track', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'silver', 'stroke-width': 10});
    
20.     tz.svgson('msvg', 'circle', {id: 'prog', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'orange', 'stroke-width': 10});
    
21.     tz.svgprog('msvg', 'track', 'prog');
    
22.     tz.add('img', '', 'rot-ani', {
    
23.         src: 'https://638183.freep.cn/638183/web/svg1/s001.svg',
    
24.         alt: '',
    
25.         style: 'position: absolute; width: 240px; cursor: pointer; clip-path: circle(80px)'
    
26.     }).to('player').playmp3();
    
27.     tz.fs().style('right: 30px; bottom: 30px');
    
28. </script>

复制代码

马黑黑

这是竖排歌词的演示。实现方式非常简单：CSS 代码第 05 行

阿狄丽娜

有创意

偶然~

来欣赏马老师的精品佳作！

偶然~

音画唯美

偶然~

背景歌声动听

偶然~

制作唯美大气

偶然~

音画合一，音乐与画面结合完美

偶然~

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~

期待马老师佳作频出！

偶然~

愿马老师事事如意皆顺遂！

偶然~

感谢马老师带来的精彩，辛苦了！祝马老师开心幸福、阖家安康！

马黑黑

偶然~ 发表于 2025-12-4 13:51
感谢马老师带来的精彩，辛苦了！祝马老师开心幸福、阖家安康！

下午好

偶然~

马黑黑 发表于 2025-12-4 13:59
下午好

心宽快乐自己造，
每日开颜笑一笑。
烦恼抛开全散尽，
知足常乐乐逍遥。
早安吉祥！

清茶煮雪

这首歌曲真好听！

清茶煮雪

黑黑老师好才艺！歌曲动效别致，真好看！

清茶煮雪

还分享了代码，谢谢老师的无私奉献

马黑黑

清茶煮雪 发表于 2025-12-4 15:43
还分享了代码，谢谢老师的无私奉献

马黑黑

清茶煮雪 发表于 2025-12-4 15:42
黑黑老师好才艺！歌曲动效别致，真好看！

感谢临帖