论坛 › 欢乐水吧 › 【月满花潮庆华诞】明月几时有

梦江南 发表于 2025-10-2 16:11

【月满花潮庆华诞】明月几时有

<style>
#papa { margin: 150px 0 20px calc(50% - 700px); background:#800 url('https://cccimg.com/view.php/fd1b8d57b170e6eb0ff0abb83c091150.jpg ')no-repeat center/cover;width: 1250px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }

#mdiv {z-index: 10;
      --size: 0px;
      --color: teal;
      position: relative;
      left: calc(-35% - var(--size) / 2);
      top: 230px;
      width: var(--size);
      height: var(--size);
      display: grid;
      place-items: center;
      animation: rot 8s linear infinite ;
      cursor: pointer;
}
#mdiv::before, #mdiv::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
      border-color: var(--color) transparent;
      
      border-radius: 100% 100% 100% 100%;
      filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }

#vid {z-index: 2;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
       -moz-mask-image: radial-gradient(white 2% , transparent 50%);
}
#vido {z-index: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
       ;
}

#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>   
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2748966224.mp3"                                       autoplay loop></audio>
<video id="vid" src="" autoplay loop muted></video>
<video id="vido" src=" " autoplay loop muted></video>
</div>


   
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

</script>
<style type="text/css">
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 85%;transform: translate(-50%);font:normal 4em 华文新魏; font-weight:400;color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `

演唱 : 叶雨岑｜Y星人儿歌｜贝乐虎儿歌
作词 : 苏轼
作曲 : 叶圣涛
编曲 : 陈骁
制作人 : 叶圣涛
伴唱 : 袁鑫怡
录音 : 王泽坤
混音 : 王泽坤
视觉设计 : 刘 鹤
项目执行 : 路晓环
宣发总监 : 任千之
项目运营 : 崔洛浠
出品人 : 叶圣涛
版权 : 外星人音乐
发行 : 外星人传媒
【未经著作权人许可不得翻唱翻录或者使用】
明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
又恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁低绮户照无眠
不应有恨何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
我欲乘风归去
又恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁低绮户照无眠
不应有恨何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
但愿人长久
千里共婵娟

`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => { let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) { if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {ar = item > aver ? aver : item; });
return ar;};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
       let lrcAr = [];
      let calcRule = ;
       for(x of text.split('\n')) {
            let ar = [];
               let re = /\d+[\.:]\d+([\.:]\d+)?/g;
               let geci = x.replace(re,'');
               if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                     if(time != null) {
                               for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                       let sec = 0;
                                       for(z in tmp) sec += tmp * calcRule;
                                       ar = ;
                                       lrcAr.push(ar);
                              }
                     }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
       lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
       mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
               }
      }
       if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
       let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
       let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
       if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
         else continue;
       }
    }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

梦油 发表于 2025-10-2 16:45

‌今年中秋夜将出现“超级月亮”天象，且为“十五的月亮十六圆”，全国多地天气适宜赏月。

梦江南 发表于 2025-10-2 18:23

梦油 发表于 2025-10-2 16:45
‌今年中秋夜将出现“超级月亮”天象，且为“十五的月亮十六圆”，全国多地天气适宜赏月。

听说是在白天。到时看看。

偶然~ 发表于 2025-10-2 19:16

这个版本好听

偶然~ 发表于 2025-10-2 19:17

梦江南制作很好，选取的图片非常棒

偶然~ 发表于 2025-10-2 19:18

感谢梦江南带来的精彩，辛苦了！祝你国庆中秋快乐、阖家幸福！

小九 发表于 2025-10-2 20:13

很好听的一首曲子，带着回忆和思念！ 祝福大家中秋阖家团圆！ 双节快乐！{:4_187:}

梦油 发表于 2025-10-2 20:34

梦江南 发表于 2025-10-2 18:23
听说是在白天。到时看看。

是的，今年中秋月亮最圆时刻为10月7日11时48分

樵歌 发表于 2025-10-2 20:38

人间山河美好，那嫦娥何必要去寂寞的月宫吖，真是想不开！{:4_189:}

樵歌 发表于 2025-10-2 20:39

欣赏江南优美音画{:4_199:}

澜天 发表于 2025-10-2 21:11

樵歌 发表于 2025-10-2 20:38
人间山河美好，那嫦娥何必要去寂寞的月宫吖，真是想不开！

偷吃了灵药
没办法
就起飞了
{:4_170:}

澜天 发表于 2025-10-2 21:12

很好的画面
双节都涵盖了
还有童声的歌曲
完美
{:4_187:}

樵歌 发表于 2025-10-2 21:42

澜天 发表于 2025-10-2 21:11
偷吃了灵药
没办法
就起飞了

她后悔不{:4_189:}

澜天 发表于 2025-10-2 22:13

樵歌 发表于 2025-10-2 21:42
她后悔不

后悔呀
李商隐说
嫦娥应悔偷灵药
碧海青天夜夜心
{:4_170:}

红影 发表于 2025-10-2 23:16

这个背景好，把国庆和中秋的意境都包括了呢。歌曲也极好听。
欣赏江南好帖{:4_199:}

樵歌 发表于 2025-10-3 06:50

澜天 发表于 2025-10-2 22:13
后悔呀
李商隐说
嫦娥应悔偷灵药


我看未必呀
因为那上面有个帅哥吴刚
另外据说二师兄也心心念念滴
保不齐还有其它青年神仙想着
多风光呀

梦江南 发表于 2025-10-3 09:26

偶然~ 发表于 2025-10-2 19:16
这个版本好听

在163里几首好听的要有VIP，普通的会员也不是每首都能听的，就只好选这首童声版 的了。

梦江南 发表于 2025-10-3 09:27

偶然~ 发表于 2025-10-2 19:17
梦江南制作很好，选取的图片非常棒

这张图片是用AI加PS加工合成的。凑个数吧！

梦江南 发表于 2025-10-3 09:29

偶然~ 发表于 2025-10-2 19:18
感谢梦江南带来的精彩，辛苦了！祝你国庆中秋快乐、阖家幸福！

谢谢你们的辛苦，祝双节快乐，阖家幸福！

梦江南 发表于 2025-10-3 09:30

小九 发表于 2025-10-2 20:13
很好听的一首曲子，带着回忆和思念！ 祝福大家中秋阖家团圆！ 双节快乐！

谢谢小九版主欣赏支持，你们辛苦了！双节快乐，阖家幸福！

查看完整版本: 【月满花潮庆华诞】明月几时有