【月满花潮庆华诞】月亮光光

杨帆发表于 2025-10-4 16:18

本帖最后由杨帆于 2025-10-5 11:47 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>徐小凤 - 月亮光光</title>
</head>
<body>
<style>
#papa { margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);background: #000 url('https://pic1.imgdb.cn/item/68df311ac5157e1a8851bcb9.jpg') no-repeat center/cover; width: 1280px; height: 750px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; display: grid; place-items: center; user-drag: none; user-select: none; --state:running;z-index: 1; }
#jzg{width: 100%; height:80%;position:absolute;z-index: 2;left: 0%;top:0%; -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 60%);mask-image: linear-gradient(to bottom, black 30%, transparent 60%);}
#jzg img { width: 100%; height: 100%; }
.dancer{ position: absolute; --dance-duration: .8s; --dance-rotate: 3deg; cursor: pointer; animation: sway var(--dance-duration) -1s linear infinite alternate var(--state); z-index:10;}
.dancer:hover{ transform:scale(1.1,1.1);filter: hue-rotate(60deg) drop-shadow(3px 2px 35px Gold); animation-play-state: paused;--opacity:.8;opacity: var(--opacity); transition: 1s; }
@keyframes sway { to { transform: rotate(var(--dance-rotate)); } }
#mdiv { z-index: 10; --size: 120px; --color: teal; position: absolute; left:33%; top: 25%; width: var(--size); height: var(--size); display: grid; place-items: center; animation: sway .8s linear infinite alternate var(--state); cursor: pointer; --dance-duration: .5s; --dance-rotate: 5deg; }
#mdiv:hover{ transform:scale(1.1,1.1);filter: brightness(2) hue-rotate(60deg); animation-play-state: paused;--opacity:.8;opacity: var(--opacity); transition: 1s; }
#vid,#vid1 { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(to right top, red 0%,transparent 90%,transparent); -moz--mask: linear-gradient(to right top, red 0%,transparent 90%,transparent); mask: linear-gradient(to right top, red 0%,transparent 90%,transparent); opacity: .9; }
#fullscreen { position: absolute; top: 30px; right: 30px; font: normal 1.5em 楷体; color: #fff; text-shadow: 0 0 3px #000; opacity: 1; cursor: pointer; user-select: none; z-index: 8; }
#fullscreen:hover { font-style: italic; }
#lrc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(0deg, #ff0000, #ff6600, #ffff00); position: absolute; z-index: 6; left: 20%; top: 8%; transform: translateX(-50%); font: normal 2.5em 华文新魏; font-weight: 400; color: #000080; white-space: pre; writing-mode: vertical-lr; -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 -1px 0); }
#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 0 100% 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); } }
#img-border { width:100%;height:100%;position: absolute;--state: running;animation:rotating 10s linear infinite var(--state);z-index:8;background:url('https://pic1.imgdb.cn/item/68dfef6ac5157e1a88549362.png') no-repeat center/80% 80%; }
@keyframes rotating{ 0% {opacity: 1;transform: scale(.8);} 10% {opacity: 1;transform: scale(.6);filter:hue-rotate(360deg)contrast(120%)brightness(120%);} 20% {opacity: 1;transform: scale(1.5);} 60% {opacity: 1;transform: scale(.6)rotateY(-45deg);} 70% {opacity: 1;transform: scale(.8)rotateY(-45deg);filter:hue-rotate(360deg)contrast(120%)brightness(120%);} 80% {opacity: 1;transform: scale(1.5)rotateY(-45deg);} 100% {opacity: 0;transform:scale(1)rotateY(-45deg);} }
</style>
<div id="papa">
   <videoid ="vid" src="https://video.699pic.com/videos/48/99/63/a_JQ9bv8G8yWXj1560489963_10s.mp4" autoplay loop muted></video>
   <videoid ="vid1" src="https://upfile.mp3.wf/view.php/e166a19fe479d2ecea90af6d076eb665.mp4" autoplay loop muted></video>
   <div id="img-border" ></div>
   <img id="mdiv"title="暂停" src="https://pic1.imgdb.cn/item/68dea775c5157e1a88510408.png" alt="">
   <div data-lrc="" id="lrc"></div>
   <span id="fullscreen">全屏欣赏</span>
   <audio id="aud" src="https://upfile.mp3.wf/view.php/1198c7b0d03d450520fb14ef1167774e.mp3" autoplay loop></audio>
   <div id="jzg"><img id="Img" src="https://pic1.imgdb.cn/item/68df520fc5157e1a885256ea.png" alt="" /></div>
   <img class="dancer"title="暂停" src="https://pic1.imgdb.cn/item/68df5594c5157e1a885263ee.png" alt="" style="width: 287px; height: 321px; left:44%; top:10%;">
</div>
<script>
   const mdiv = document.getElementById('mdiv');
   const aud = document.getElementById('aud');
   const vid = document.getElementById('vid');
   const fullscreen = document.getElementById('fullscreen');
   const papa = document.getElementById('papa');
   const lrc = document.getElementById('lrc');
   const dancer = document.querySelectorAll('.dancer');
   const imgBorder = document.getElementById('img-border');

   mdiv.onclick = () => {
         if (aud.paused) {
            aud.play();
            vid.play();
            mdiv.style.animationPlayState = 'running';
         imgBorder.style.setProperty('--state', 'running');

         dancer.forEach(item => {
         item.style.setProperty('--state', 'running');
         });

            lrc.style.setProperty('--state', 'running');
         } else {
            aud.pause();
            vid.pause();
            mdiv.style.animationPlayState = 'paused';
         imgBorder.style.setProperty('--state', 'paused');

         dancer.forEach(item => {
         item.style.setProperty('--state', 'paused');
      });

            lrc.style.setProperty('--state', 'paused');
         }

         mdiv.title = aud.paused ? '播放' : '暂停';

         dancer.forEach(item => {
         item.title = aud.paused ? '播放' : '暂停';
         });
   };

      dancer.forEach(item => {
item.onclick = () => mdiv.click();

});
   (function() {
         const lrcStr = `

月亮光光 - 徐小凤
词：苏翁
曲：TADASHI YOSHIDA/KAZUO KOIKE
月亮光光
夜静更深对朗月
朗月清辉亮
行遍天涯离开家园沉痛看月亮
何堪天涯
回首家乡
夜夜暗盼望
笑对朗月月光光照地塘上
照着欢畅团叙愉快温暖处乐也洋洋
远处里阻隔千里白云晚望
想想想别离后寸心怎会不思乡
每夜每朝报愁眠悲痛流浪
故地故苑最是难忘空盼望
啊深秋满地风霜最断肠
阵阵秋风送柳浪朗月光且亮
人去天涯萍踪漂流何处有岸
人海飘浮怀想家乡异地两处望
笑对朗月月光光照地塘上
照着欢畅孩儿父母温暖处乐也洋洋
去去去去家千里梦回故乡上
悲秋风独流浪那堪漂泊嗟风霜
冷落痛心岁月无情漂泊流浪
那日那朝鸟倦还巢春柳岸
啊深秋倍念家乡最断肠
远处里阻隔千里白云晚望
想想想别离后寸心怎会不思乡
每夜每朝报愁眠悲痛流浪
故地故苑最是难忘空盼望
啊深秋满地风霜最断肠

         `;

         let mKey = 0;
         let mFlag = true;
         const averAdd = 0.3;
         let lrcAr = [];

         const lrcTime = (ar) => {
            const tmpAr = [];
            // 为前n-1句计算实际时间差，最后一句用前句平均时长
            for (let j = 0; j < ar.length; j++) {
               if (j < ar.length - 1) {
                     tmpAr = parseFloat((ar - ar).toFixed(1));
               } else {
                     const avg = tmpAr.reduce((a, b) => a + b) / tmpAr.length;
                     tmpAr = parseFloat(avg.toFixed(1));
               }
            }
            // 赋值时长到歌词数组
            tmpAr.forEach((item, key) => {
               ar = item;
            });
            return ar;
         };

         const getLrcAr = (text) => {
            const arr = [];
            const calcRule = ;
            const lines = text.split('\n');

            lines.forEach(line => {
               const geci = line.replace(/\d+[\.:]\d+([\.:]\d+)?/g, '').replace(/[\[\]\'\"\t,]s?/g, '').trim();
               if (!geci) return;

               const timeMatch = line.match(/\d+[\.:]\d+([\.:]\d+)?/g);
               if (!timeMatch) return;

               timeMatch.forEach(timeStr => {
                     const timeArr = timeStr.match(/\d+/g);
                     let sec = 0;
                     timeArr.forEach((val, idx) => {
                        sec += val * calcRule;
                     });
                     arr.push();
               });
            });

            arr.sort((a, b) => a - b);
            return lrcTime(arr);
         };

         const showLrc = (time) => {
            if (mKey >= lrcAr.length) mKey = 0;
            const name = mFlag ? 'cover1' : 'cover2';
            lrc.innerText = lrcAr;
            lrc.dataset.lrc = lrcAr;
            lrc.style.setProperty('--motion', name);
            lrc.style.setProperty('--tt', time + 's');
            lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');

            mKey++;
            mFlag = !mFlag;
         };

         const calcKey = () => {
            for (let j = 0; j < lrcAr.length; j++) {
               if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
               }
            }
            if (mKey < 0) mKey = 0;
            if (mKey >= lrcAr.length) mKey = lrcAr.length - 1;

            const time = lrcAr - (aud.currentTime - lrcAr);
            showLrc(time);
         };

         lrcAr = getLrcAr(lrcStr);

         aud.addEventListener('timeupdate', () => {
            if (aud.paused) return;
            for (let j = mKey; j < lrcAr.length; j++) {
               if (aud.currentTime >= lrcAr && mKey === j) {
                     showLrc(lrcAr);
                     break;
               }
               if (mKey >= lrcAr.length) {
                     mKey = 0;
               }
            }
         });

         aud.addEventListener('pause', () => {
            lrc.style.setProperty('--state', 'paused');
         });

         aud.addEventListener('play', () => {
            lrc.style.setProperty('--state', 'running');
         });

         aud.addEventListener('seeked', calcKey);
         showLrc(lrcAr);
   })();

   let fs = true;
   let fsTimer;
   fullscreen.onclick = () => {
         fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
         fs = !fs;
   };
   papa.addEventListener('mousemove', () => {
         clearTimeout(fsTimer);
         fullscreen.style.opacity = '1';
         fsTimer = setTimeout(() => {
            fullscreen.style.opacity = '0';
         }, 3000);
   });

document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;
fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';
});
</script>
</body>
</html>

梦江南 发表于 2025-10-4 16:43

好温馨，漂亮的画面，谢谢杨帆的精彩分享！{:4_187:}

梦江南 发表于 2025-10-4 16:44

祝双节快乐，阖家幸福！{:4_204:}

澜天发表于 2025-10-4 16:52

欣赏美图
节日快乐
{:4_191:}

杨帆发表于 2025-10-4 17:28

本帖最后由杨帆于 2025-10-4 17:34 编辑

梦江南发表于 2025-10-4 16:43
好温馨，漂亮的画面，谢谢杨帆的精彩分享！
谢谢江南鼓励，歌词样式用的你的呦{:4_171:}

杨帆发表于 2025-10-4 17:29

澜天发表于 2025-10-4 16:52
欣赏美图
节日快乐

谢谢澜天老师鼓励，祝双节快乐，阖家幸福！{:4_176:}

杨帆发表于 2025-10-4 17:34

梦江南发表于 2025-10-4 16:44
祝双节快乐，阖家幸福！

谢谢，同祝双节快乐，阖家幸福！{:4_187:}

红影发表于 2025-10-4 19:31

制作真漂亮。欣赏扬帆好帖，祝双节快乐{:4_187:}

杨帆发表于 2025-10-4 23:00

红影发表于 2025-10-4 19:31
制作真漂亮。欣赏扬帆好帖，祝双节快乐

谢谢影子鼓励~祝双节快乐，阖家幸福！{:4_187:}

页: [1]

花潮论坛's Archiver

【月满花潮庆华诞】月亮光光