《我笑江南烟雨多》TO冬天的雨
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translate(-50%, 10px); width: clamp(800px, 90vw, 1400px); height: clamp(460px, 90vh, 760px); background: #ddd url('https://pic1.imgdb.cn/item/67f9331588c538a9b5cb549e.jpg') no-repeat center/cover; }
#mplayer { bottom: 30px; left: 68%; --track: #e6fefc;--prog: #0ef6f2; width: 260px; }
#lrcDiv {width: 500px; top: 54.5%; left: 38.4%; color: #e6fefc; --hlcolor: #0ef6f2; font: normal 20px/30px 'FZYaoti', sans-serif;}
#lrcDiv > p.hlight { font-size: 20px; }
#fsbtn { top: 20px; left: 70px;color: #e6fefc; border: 2px solid #e6fefc;}
.zw { height: clamp(460px, 90vh, 760px); margin: 30px; }
.vid {position: absolute; width: 100%; height: 120%; opacity: .8; object-fit: cover;mask: radial-gradient(transparent 20%, red);-webkit-mask: radial-gradient(transparent 20%, red);pointer-events: none; bottom: 0; }
.vid:nth-of-type(2) { opacity: 0.55;}
.vid:nth-of-type(3) { opacity: 0.35; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/685750207590bdf08bd3d7ce1dd73ddc.mp3" autoplay loop></audio>
<video class="vid" src="https://video.699pic.com/videos/ing1/ING_VID_0340483_10s.mp4" autoplay loop muted></video>
<video class="vid" src="https://video.699pic.com/videos/54/28/08/b_yTc2Yr2rUyeF1558542808_10s.mp4" autoplay loop muted></video>
<video class="vid" src="https://video.699pic.com/videos/46/19/16/b_E5HJtznTYgGQ1564461916_10s.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
var geci = `
我笑江南烟雨多
演唱：媛小小
帖赠冬天的雨
举杯月色
饮罢纵我
曾高声问来客
意欲如何
你却肆意放歌
与我应和
端得人间潇洒客
饮酒作乐
一梦南柯
知己灵魂契合
天造地设
别时许诺
会与我看遍山河
回首向来多萧瑟
我笑江南烟雨多
你说烟雨在等我
等我看
满堂花开又落
梅子黄时白日歌
满城风絮又凌波
再问我
闲情几许如何
你后来辜负许诺
我等不到的寄托
等不到
那重来的春色
等不到死生契阔
等不到与子成说
等到的
是你我皆过客
饮酒作乐
一梦南柯
知己灵魂契合
天造地设
别时许诺
会与我看遍山河
回首向来多萧瑟
我笑江南烟雨多
你说烟雨在等我
等我看
满堂花开又落
梅子黄时白日歌
满城风絮又凌波
再问我
闲情几许如何
你后来辜负许诺
我等不到的寄托
等不到
那重来的春色
等不到死生契阔
等不到与子成说
等到的
是你我皆过客
我笑江南烟雨多
你说烟雨在等我
等我看
满堂花开又落
梅子黄时白日歌
满城风絮又凌波
再问我
闲情几许如何
你后来辜负许诺
我等不到的寄托
等不到
那重来的春色
等不到死生契阔
等不到与子成说
等到的
是你我皆过客`;
hcplay(tz,geci,7);
</script> @冬天的雨 谢谢冬小雨的好帖，又试了个作业，这次是多加了几个视频。把歌词放到桥洞里也有趣{:4_173:} @马黑黑 发现横向歌词只要不是居中，总有点轻微移位，即使把宽度变大了也不行。没办法，把高亮那句的字体也设成了一样大。好像只有这法子才不移动？{:4_204:} 当然居中的时候没这样问题，即使歌词长点都没问题。 你把文字嵌放在桥洞和其倒影里，可谓独树一帜。{:5_116:} 梦油 发表于 2025-4-12 17:29
你把文字嵌放在桥洞和其倒影里，可谓独树一帜。
正好看到这个图图，觉得好玩就把歌词放桥洞里了{:4_173:} 红影 发表于 2025-4-12 20:04
正好看到这个图图，觉得好玩就把歌词放桥洞里了
妙，妙！ 梦油 发表于 2025-4-12 20:19
妙，妙！
谢谢梦油，有你夸奖，开心{:4_173:} 地上小桥流水拱桥，天上白云仙鹤飞过。画面配合和声音乐，真的一派和谐景象！ 拱桥的空间用来显示歌词，这个创意很好！ 红影 发表于 2025-4-12 16:35
@马黑黑 发现横向歌词只要不是居中，总有点轻微移位，即使把宽度变大了也不行。没办法，把高亮那句的字体也 ...
亲爱的，我试了也是只有改了一样字体才平稳了，要不就直接上面平的也是好一点 亲爱的，设计的太美了，歌词位置刚好在桥洞里面，看看都有趣的，会动脑子的 这首歌我也是喜欢的，做过的，循环一下{:4_208:} 呼叫冬雨@冬天的雨 樵歌 发表于 2025-4-12 21:30
地上小桥流水拱桥，天上白云仙鹤飞过。画面配合和声音乐，真的一派和谐景象！
我多加了几个视频，这样动态多点，否则画面会显得比较空{:4_173:} 樵歌 发表于 2025-4-12 21:32
拱桥的空间用来显示歌词，这个创意很好！
正好看到那里空着{:4_170:} 小辣椒 发表于 2025-4-12 21:48
亲爱的，我试了也是只有改了一样字体才平稳了，要不就直接上面平的也是好一点
发现居中的时候没问题，可能使用数字定位也没什么问题，就是用百分比定位会让歌词不稳，不知道怎么回事。 小辣椒 发表于 2025-4-12 21:49
亲爱的，设计的太美了，歌词位置刚好在桥洞里面，看看都有趣的，会动脑子的
临时想起放那的，就是好玩呢{:4_173:} 小辣椒 发表于 2025-4-12 21:50
这首歌我也是喜欢的，做过的，循环一下
我是跑小风网站里去找的，有现成的歌曲就直接用了{:4_173:} 红影 发表于 2025-4-12 16:35
@马黑黑 发现横向歌词只要不是居中，总有点轻微移位，即使把宽度变大了也不行。没办法，把高亮那句的字体也 ...
lrcDiv 不居中的时候，设 text-align: left;