牵丝戏
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css?v1';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qsx.webp') no-repeat center/cover; }
.fadeInLrc { right: 20%; }
.char { display: block; }
</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');
const hcLrc = tz.lrc2HC(`牵丝线·银临&阿杰\n嘲笑谁恃美扬威\n没了心如何相配\n盘铃声清脆 帷幕间灯火幽微\n我和你 最天生一对\n没了你才算原罪 没了心才好相配\n你褴褛我彩绘 并肩行过山与水\n你憔悴 我替你明媚\n是你吻开笔墨 染我眼角珠泪\n演离合相遇悲喜为谁\n他们迂回误会 我却只由你支配\n问世间哪有更完美\n兰花指捻红尘似水\n三尺红台 万事入歌吹\n唱别久悲不成悲 十分红处竟成灰\n愿谁记得谁 最好的年岁\n你一牵我舞如飞 你一引我懂进退\n苦乐都跟随 举手投足不违背\n将谦卑 温柔成绝对\n你错我不肯对 你懵懂我蒙昧\n心火怎甘心扬汤止沸\n你枯我不曾萎 你倦我也不敢累\n用什么暖你一千岁\n风雪依稀秋白发尾\n灯火葳蕤 揉皱你眼眉\n假如你舍一滴泪 假如老去我能陪\n烟波里成灰 也去得完美\n风雪依稀秋白发尾\n灯火葳蕤 揉皱你眼眉\n假如你舍一滴泪 假如老去我能陪\n烟波里成灰 也去得完美`);
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=30352891'});
tz.lrc(hcLrc, '', true);
tz.add('div', 'player', 'wrap200', {style: 'bottom: 20px'});
tz.add('svg', 'msvg', '', {width: 200, height: 200}).to('player');
tz.svgson('msvg', 'circle', {id: 'track', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'silver', 'stroke-width': 10});
tz.svgson('msvg', 'circle', {id: 'prog', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'orange', 'stroke-width': 10});
tz.svgprog('msvg', 'track', 'prog');
tz.add('img', '', 'rot-ani', {
src: 'https://638183.freep.cn/638183/web/svg1/s001.svg',
alt: '',
style: 'position: absolute; width: 240px; cursor: pointer; clip-path: circle(80px)'
}).to('player').playmp3();
tz.fs().style('right: 30px; bottom: 30px');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css?v1';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qsx.webp') no-repeat center/cover; }
.fadeInLrc { right: 20%; }
.char { display: block; }
</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');
const hcLrc = tz.lrc2HC(`牵丝线·银临&阿杰\n嘲笑谁恃美扬威\n没了心如何相配\n盘铃声清脆 帷幕间灯火幽微\n我和你 最天生一对\n没了你才算原罪 没了心才好相配\n你褴褛我彩绘 并肩行过山与水\n你憔悴 我替你明媚\n是你吻开笔墨 染我眼角珠泪\n演离合相遇悲喜为谁\n他们迂回误会 我却只由你支配\n问世间哪有更完美\n兰花指捻红尘似水\n三尺红台 万事入歌吹\n唱别久悲不成悲 十分红处竟成灰\n愿谁记得谁 最好的年岁\n你一牵我舞如飞 你一引我懂进退\n苦乐都跟随 举手投足不违背\n将谦卑 温柔成绝对\n你错我不肯对 你懵懂我蒙昧\n心火怎甘心扬汤止沸\n你枯我不曾萎 你倦我也不敢累\n用什么暖你一千岁\n风雪依稀秋白发尾\n灯火葳蕤 揉皱你眼眉\n假如你舍一滴泪 假如老去我能陪\n烟波里成灰 也去得完美\n风雪依稀秋白发尾\n灯火葳蕤 揉皱你眼眉\n假如你舍一滴泪 假如老去我能陪\n烟波里成灰 也去得完美`);
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=30352891'});
tz.lrc(hcLrc, '', true);
tz.add('div', 'player', 'wrap200', {style: 'bottom: 20px'});
tz.add('svg', 'msvg', '', {width: 200, height: 200}).to('player');
tz.svgson('msvg', 'circle', {id: 'track', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'silver', 'stroke-width': 10});
tz.svgson('msvg', 'circle', {id: 'prog', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'orange', 'stroke-width': 10});
tz.svgprog('msvg', 'track', 'prog');
tz.add('img', '', 'rot-ani', {
src: 'https://638183.freep.cn/638183/web/svg1/s001.svg',
alt: '',
style: 'position: absolute; width: 240px; cursor: pointer; clip-path: circle(80px)'
}).to('player').playmp3();
tz.fs().style('right: 30px; bottom: 30px');
</script>
这是竖排歌词的演示。实现方式非常简单：CSS 代码第 05 行 有创意 来欣赏马老师的精品佳作！
音画唯美
背景歌声动听
制作唯美大气
音画合一，音乐与画面结合完美
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待马老师佳作频出！
愿马老师事事如意皆顺遂！
感谢马老师带来的精彩，辛苦了！祝马老师开心幸福、阖家安康！ 偶然~ 发表于 2025-12-4 13:51
感谢马老师带来的精彩，辛苦了！祝马老师开心幸福、阖家安康！
下午好 马黑黑 发表于 2025-12-4 13:59
下午好
{:4_180:}
心宽快乐自己造，
每日开颜笑一笑。
烦恼抛开全散尽，
知足常乐乐逍遥。
早安吉祥！ 这首歌曲真好听！{:4_199:} 黑黑老师好才艺！歌曲动效别致，真好看！{:4_178:} 还分享了代码，谢谢老师的无私奉献{:4_204:} 清茶煮雪 发表于 2025-12-4 15:43
还分享了代码，谢谢老师的无私奉献
{:4_180:} 清茶煮雪 发表于 2025-12-4 15:42
黑黑老师好才艺！歌曲动效别致，真好看！
感谢临帖