答谢东篱老师的新装（夜阑珊）

梦江南 发表于 2026-8-9 08:43

本帖最后由梦江南于 2026-8-9 09:00 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; color: yellow; position:relative; overflow:hidden; }
.pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://pan.suyanw.cn/view.php/c55c3e88a944601ec45cd3f9384ec60e.jpg') no-repeat center/cover; z-index: -2; }
.pa::before { background-position: var(--begin1) 0; }
.pa::after {
   transform: scale(-1, 1);
   background-position: var(--begin2) 0;
}
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#mpic {top: 605px; width: 160px; bottom: 50px; }

/* ==========新增歌词样式：底部居中单行========== */
.lyric-wrap{
   position:absolute;
   top: 785px;
   bottom:40px;
   left:0;
   width:100%;
   text-align:center;
   z-index:10;
   pointer-events:none;
}
.lyric-text{
   font-size:28px;
   color:#ffffff;
   text-shadow:1px 1px 3px #000000;
   white-space:nowrap;
   /* 修改部分：设置字体为隶书，并加粗 */
   font-family: "LiShu", "隶书", serif;
   font-weight: bold;
}
</style>

<div id="pa" class="pa">
<img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
<video class="pd-vid" src="https://pan.suyanw.cn/view.php/6bffc0e5916245c6988542c06ca7a81e.mp4" autoplay loop muted></video>

<div class="lyric-wrap">
   <div class="lyric-text"></div>
</div>
</div>

<script>
var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;

var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=3383127428.mp3']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

// ============这里粘贴你的LRC完整歌词文本============
const lrcText = `夜阑珊
LRC歌词编辑：梦江南
月色冷照空船
往事潜入梦幻
忆当年桃花繁
回首处是阑珊
朱窗畔墨迹干
书已风寄云端
字万千意阑珊
无人守着牵绊
叹此间离合悲欢
缘分终究会流散
一寸心如何能看
物是人非空留憾
此生路漫漫长叹
孤独身影步蹒跚
********
旧长安心泰然
琴声断弦已换
诺言淡随风散
这旧事人非叹
叹此间离合悲欢
缘分终究会流散
一寸心如何能看
物是人非空留憾
此生路漫漫长叹
孤独身影步蹒跚
若再见你无关
风与月皆无关
情深处难言
徒留此心独怅惘
叹此间离合悲欢
缘分终究会流散
一寸心如何能看
物是人非空留憾
啊啊啊余生路漫漫长叹
孤独身影步蹒跚
夜阑珊风易残
`;
// ==================================================

// LRC解析函数
function parseLrc(lrcStr){
   const lines = lrcStr.split('\n');
   const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/;
   let list = [];
   lines.forEach(line=>{
         const m = line.match(reg);
         if(!m) return;
         const time = parseInt(m)*60 + parseInt(m) + parseInt(m)/1000;
         const txt = line.replace(reg,'').trim();
         if(txt) list.push({time,text:txt});
   });
   return list.sort((a,b)=>a.time-b.time);
}

function tzRun() {
   var aud = new AudPlayer(options);
   const lyricDom = document.querySelector('.lyric-text');
   const lyricList = parseLrc(lrcText);
   let lastIndex = -1;

   // 歌词同步更新
   function updateLyric(){
         const cur = aud.aud.currentTime;
         let idx = 0;
         for(let i=0;i<lyricList.length;i++){
            if(lyricList.time <= cur) idx = i;
         }
         if(idx!==lastIndex){
            lyricDom.innerText = lyricList.text;
            lastIndex = idx;
         }
   }
   // 音频时间更新事件，驱动歌词切换
   aud.aud.ontimeupdate = updateLyric;

   function bgMove() {
         var ww = aud.pa.offsetWidth;
         function moving() {
            cancelAnimationFrame(raf);
            begin1 += speed;
            if (speed > 0) {
               if (begin1 >= ww) begin1 = -ww;
            } else {
               if(begin1 <= -ww) begin1 = ww;
            }
            begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
            aud.pa.style.setProperty('--begin1', begin1 + 'px');
            aud.pa.style.setProperty('--begin2', begin2 + 'px');
            aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
         }
         moving();
   }

   aud.aud.onpause = () => bgMove();
   aud.aud.onplaying = () => bgMove();
   window.onresize = () => bgMove();
}

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
</script>

梦江南 发表于 2026-8-9 08:46

@东篱闲人谢谢老师的新装，以这帖略表小小心意。{:4_180:}

杨帆发表于 2026-8-9 09:48

恭喜江南换新装，祝东篱老师收礼开心{:4_190:}

梦江南 发表于 2026-8-9 10:02

杨帆发表于 2026-8-9 09:48
恭喜江南换新装，祝东篱老师收礼开心

问好杨帆，谢谢欣赏支持，这几天有台风，出门注意安全。{:4_204:}

杨帆发表于 2026-8-9 10:07

梦江南发表于 2026-8-9 10:02
问好杨帆，谢谢欣赏支持，这几天有台风，出门注意安全。

是，安全第一{:4_181:}

梦江南 发表于 2026-8-9 10:24

杨帆发表于 2026-8-9 10:07
是，安全第一

小心使得万年船啊！{:4_204:}

红影发表于 2026-8-9 11:03

这个制作漂亮，衔接处浑然天成，还有夜鸟儿横贯衔接处，更是自然漂亮。
欣赏江南好帖，东篱大哥收礼开心{:4_199:}

梦江南 发表于 2026-8-9 18:57

红影发表于 2026-8-9 11:03
这个制作漂亮，衔接处浑然天成，还有夜鸟儿横贯衔接处，更是自然漂亮。
欣赏江南好帖，东篱大哥收礼开心{: ...

谢谢影子欣赏支持，晚上好！台风这么大，上班出门注意安全。{:4_204:}

小辣椒 发表于 2026-8-9 21:19

阿姨这个也是图片平移效果吧，小辣椒现在许多都没有做了

小辣椒 发表于 2026-8-9 21:20

背景图图太漂亮了，歌曲也是好听，小辣椒欣赏加学习{:4_171:}{:4_185:}

小辣椒 发表于 2026-8-9 21:21

老头收礼开心@东篱闲人

红影发表于 2026-8-9 22:34

梦江南发表于 2026-8-9 18:57
谢谢影子欣赏支持，晚上好！台风这么大，上班出门注意安全。

嗯嗯，今天台风还是满大的，不过正好是休息天。谢谢江南关心{:4_187:}

梦江南 发表于 2026-8-10 08:15

小辣椒发表于 2026-8-9 21:19
阿姨这个也是图片平移效果吧，小辣椒现在许多都没有做了

小辣椒，是的，你不要急，等你有空时，一看就会的。{:4_204:}

梦江南 发表于 2026-8-10 08:18

小辣椒发表于 2026-8-9 21:20
背景图图太漂亮了，歌曲也是好听，小辣椒欣赏加学习

这张背景图同头像还有点像的。歌曲就是东篱老师图里的音乐，我把歌词提出来。{:5_150:}

小九发表于 2026-8-10 08:18

江南换新衣了，很漂亮。作品的夜色、光影、特效都做的恰当好处。欣赏！呼唤老头快来收礼哟！{:4_187:}

梦江南 发表于 2026-8-10 08:21

红影发表于 2026-8-9 22:34
嗯嗯，今天台风还是满大的，不过正好是休息天。谢谢江南关心

影子早上好，今天风小点了，上班会安全点。{:4_204:}

梦江南 发表于 2026-8-10 08:35

小九发表于 2026-8-10 08:18
江南换新衣了，很漂亮。作品的夜色、光影、特效都做的恰当好处。欣赏！呼唤老头快来收礼哟！

问好小九老师，谢谢东篱老师的新装，使江南变成江南女子了。谢谢欣赏支持，祝秋安！{:4_204:}

雨季工作室 发表于 2026-8-10 08:51

图图绚丽，歌曲寄怀，欣赏了，问好江南老师！

梦江南 发表于 2026-8-10 09:06

雨季工作室发表于 2026-8-10 08:51
图图绚丽，歌曲寄怀，欣赏了，问好江南老师！

问好雨季老师，谢谢欣赏雅评，祝秋安！{:4_204:}

东篱闲人 发表于 2026-8-10 10:59

梦江南发表于 2026-8-9 08:46
@东篱闲人谢谢老师的新装，以这帖略表小小心意。

不用这么客气，都是多年老友了。。。{:4_190:}

页: [1] 2

花潮论坛's Archiver

答谢东篱老师的新装（夜阑珊）