《愿你》TO九儿芳辰（4.1）
<style>@import 'https://638183.freep.cn/638183/web/ku/yslrc_range_player.css';
#papa { margin: 30px 0 30px calc(50% - 631px); width: 1100px; height: 650px; background: url('https://pic1.imgdb.cn/item/67e149350ba3d5a1d7e29dc6.jpg') no-repeat center/cover; border-radius: 8px; overflow: hidden; }
#mplayer { --prog: peru; --track: #f872f0; bottom: 3%; right: 23%; width: 30%; }
#lrcDiv {top: 78%; right: 10%; width: 600px; text-shadow: 1px 1px 1px rgba(0,0,0,.5); --hlcolor: #ea85de;color: #9b363e; }
#vid { position: absolute; width: 100%; height: 100%;bottom: 0; mix-blend-mode: screen; mask: linear-gradient(to top right,red 90%, transparent 60%); -webkit-mask: linear-gradient(to top right,red 90%, transparent); opacity: .95; }
#fsbtn { top: 20px; }
#dengqiu { position: absolute; right: 6%; bottom: 20px; width: 80px; height: 80px; cursor: pointer; animation: swear 2.5s linear infinite var(--state); }
@keyframes swear { to { transform: rotate(360deg); } }
</style>
<div id="papa" class="pa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/64/11/63b68f08c06b7_10s_big.mp4" autoplay loop muted></video>
<img id="dengqiu" src="https://pic1.imgdb.cn/item/67e14c4f0ba3d5a1d7e29e6a.png" alt="" />
<audio src="https://music.163.com/song/media/outer/url?id=1296106533" autoplay loop></audio>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_range_player.js';
var geci = `
《愿你》\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愿你逐梦成真，\n不负年少所想，\n愿你一直善良，\n快乐随你飞扬，\n愿这年复一年，\n春秋冬夏眷恋，\n岁月纷纷扰扰\n独宠你的容颜，\n愿你风雨中像个大人，\n阳光下面像个孩子，\n总有温暖总有光明，\n心若向阳无畏悲伤.\n`;
hcplay(papa, geci, 3);
dengqiu.onclick = () => btnPlay.click();
</script> 九儿的生日快到了，正好学习黑黑的range播放器集成LRC代码，就用来送礼了。
祝福@小九 生日快乐，芳龄永驻{:4_187:} @马黑黑 这个歌词怎么动来动去的，是因为歌词太长么？{:4_173:}
这个直接从网易云里取的歌词，才发现它有的歌词有标点符号，估计是这个造成的吧。 欣赏亲爱的好制作，喜庆的生日场景{:4_199:} 借美帖贺小九生日快乐！{:4_191:}{:4_176:}{:4_177:} 这个黑黑的源码小辣椒还没有做过的，过几天就抄个作业了{:4_174:} 红影 发表于 2025-3-24 22:31
@马黑黑 这个歌词怎么动来动去的，是因为歌词太长么？
这个直接从网易云里取的歌词，才发现它有 ...
等歌词占用的长度超过预设的，可以自定义：
#lrcDiv { width: 600px; 。。。 }
或用 width: fit-content; ，这将使用自适应宽度。
不想让歌词左右滑动，最好的做法是 width: 100%，这将令歌词永远居中显示 小辣椒 发表于 2025-3-24 22:35
欣赏亲爱的好制作，喜庆的生日场景
本来想学个帖子，想到九儿生日要到了，就用来送礼了{:4_173:} 小辣椒 发表于 2025-3-24 22:35
借美帖贺小九生日快乐！
嗯嗯，跟亲爱的一起祝福{:4_187:} 小辣椒 发表于 2025-3-24 22:37
这个黑黑的源码小辣椒还没有做过的，过几天就抄个作业了
就是黑黑那个私奔的帖子啊{:4_173:} 马黑黑 发表于 2025-3-24 22:38
等歌词占用的长度超过预设的，可以自定义：
#lrcDiv { width: 600px; 。。。 }
嗯嗯，我去调整一下宽度试试。谢谢黑黑{:4_187:} @红影，我试了试，把歌词中的
作词 : 白桦林\n 作曲 : 刘艺佳\n愿你\n编曲：刘磊\n《愿你》\n祝福九儿芳辰\n
改为 作词 : 白桦林\n 作曲 : 刘艺佳\n愿你\n编曲：刘磊\n《愿你》\n祝福九儿芳辰\n 问题就解决了 借影子朋友的精美贺帖，祝福小九生日快乐！
https://pic1.imgdb.cn/item/6690ecc5d9c307b7e97a2121.gif 亦是金 发表于 2025-3-25 00:23
@红影，我试了试，把歌词中的
作词 : 白桦林\n 作曲 : 刘艺佳\n愿 ...
嗯，对的，那个是直接复制的，没去修改。我去修一下，把前面的几句去掉并改一下时间。
谢谢亦是金老师{:4_187:} 祝福小九生日快乐，芳龄永驻，年年十八！{:4_187:} 亦是金 发表于 2025-3-25 13:03
祝福小九生日快乐，芳龄永驻，年年十八！
和亦是金老师一起祝福九儿{:4_187:} 红影 发表于 2025-3-24 23:10
嗯嗯，我去调整一下宽度试试。谢谢黑黑
支持百分比 红影好制作！{:4_199:}祝小九 生日快乐！{:4_204:} 缤纷绚丽，集美于一贴中。借师妹美贴祝九儿生日快乐！ 幸好昨天晚上看到，今天又出门采风了。回来赶紧几几句，还好师妹把时间留 得充裕。{:4_187:}