十五的月亮

杨帆发表于 2025-10-10 18:06

<!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://www.helloimg.com/i/2025/10/06/68e3dc63deb89.jpeg') 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;display:var(--display); --display:block; }
.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:68%; 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;transform: rotateY(180deg); }
#fullscreen { position: absolute; top: 30px;left: 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: 6%; top: 15%; 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:6;background:url('https://www.helloimg.com/i/2025/10/09/68e6ec79b772e.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: 0;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(3)rotateY(-45deg);} 100% {opacity: 0;transform:scale(1)rotateY(-45deg);} }
#svg { position: absolute; z-index: 5; }
#svg use { opacity: 1; animation: flash 0.5s var(--delay) infinite alternate var(--state); }
@keyframes flash { to { opacity: 0.5; transform: rotate(360deg); } }
#btnFs { right: -1000px;}
#msvg { position: absolute; top: 5%; right: -14%; width: 80%; height:40%;opacity: 1;z-index: 3; }
</style>
<div id="papa">
      <video id ="vid" src="https://video.699pic.com/videos/48/99/63/a_JQ9bv8G8yWXj1560489963_10s.mp4" autoplay loop muted></video>
   <video id ="vid1" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.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/7d544dbb6a23026f8f2446f59a62303a.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://www.helloimg.com/i/2025/10/04/68e1092b1b41f.gif" alt="" style=" width: 556px; height: 339px; bottom: -5%; right: 10%;">
   <svg id="svg" width="100%" height="100%" viewBox="0 0 1600 900">
<defs>
<g id="svgShape">
<image x="0" y="0" width="80" height="80" href="https://pic1.imgdb.cn/item/68e4fcf2c5157e1a885b437f.png" />
</g>
<path id="motionPath" d="M400 0 L600 1000" />
</defs>
</svg>

<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -100 400 200">
<defs>
<linearGradient id="lGrd" gradientTransform="rotate(45)">
<stop offset="5%" stop-color="LightCyan" />
<stop offset="35%" stop-color="Beige" />
<stop offset="95%" stop-color="Snow" />
</linearGradient>
</defs>
</svg>
</div>
   <script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
   const mdiv = document.getElementById('mdiv');
   const aud = document.getElementById('aud');
   const vid = document.getElementById('vid');
   const vid1 = document.getElementById('vid1');
   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');
   const svg = document.getElementById('svg');
   const setting = { svg: svg, lz: 20, dur: 12, gap: 600 };
   const msvg = document.getElementById('msvg');

   FS(papa, mdiv, setting);

   mdiv.onclick = () => {
         if (aud.paused) {
            aud.play();
            vid.play();
            vid1.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();
            vid1.pause();
            mdiv.style.animationPlayState = 'paused';
         imgBorder.style.setProperty('--state', 'paused');
         dancer.forEach(item => {
         item.style.setProperty('--state', 'paused');
      });
            lrc.style.setProperty('--state', 'paused');
      }

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

         mdiv.title = aud.paused ? '播放' : '暂停';
   dancer.forEach(item => {
item.style.setProperty('--display', aud.paused ? 'none' : 'block');
});

var color = createHueColors();
papa.style.setProperty('--bgg', color.c);
};

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

var dr = Dr.dr('msvg');
const txt = '十五的月亮 ';
const path = 'M-120 60 A120 120 0 0 1 120 60';
dr.setsvg({style: 'background: none;'});
dr.defs('defs');
dr.path(path, 'Gold', 'olive').id('tpath').addTo('defs');
dr.text(txt)
   .style(`
font: bold 30px sans-serif;
color: gold;
fill: var(--bgg);
stroke: url(#lGrd);
stroke-width: 2;
text-anchor: middle;
dominant-baseline: middle;
   `)
   .sets({
textLength: 300,
lengthAdjust: 'spacing'
   })
   .textPath('tpath', '50%');

let createHueColors = () => {
var a = Math.round(Math.random() * 360);
return {
c: `hsl(${a}, 100%, 50%)`,
};
};

window.addEventListener('DOMContentLoaded', () => {
const initialColor = createHueColors();
papa.style.setProperty('--bgg', initialColor.c);
});

</script><script>
   (function() {
         const lrcStr = `
十五的月亮 - 董文华
词：石祥
曲：铁源/徐锡宜
编曲：李杰
弦乐指挥：李朋
弦乐：国际首席爱乐乐团
录音：李巍
录音室：中国剧院录音室
混音：万小元
混音室：中国剧院录音室
出品人：蔡诚俊
音乐总监：林虎
监制：李慧/王冰冰
制作发行：悦晟雷音（北京）
文化传媒有限公司
啊丰收果里有你的甘甜
也有我的甘甜
军功章有我的一半
也有你的一半
十五的月亮照在家乡照在边关
宁静的夜晚你也思念我也思念
我守在婴儿的摇篮边
你巡逻在祖国的边防线
我在家乡耕耘着农田
你在边疆站岗值班
啊丰收果里有你的甘甜
也有我的甘甜
军功章有我的一半
也有你的一半
十五的月亮照在家乡照在边关
宁静的夜晚你也思念我也思念
我孝敬父母任劳任怨
你献身祖国不惜流血汗
我肩负着全家的重任
你在保卫国家安全
啊祖国昌盛有你的贡献
也有我的贡献
万家团圆是我的心愿
也是你的心愿
啊丰收果里有你的甘甜
也有我的甘甜
军功章有我的一半
也有你的一半
啊
也是你的心愿
         `;
         let mKey = 0;
         let mFlag = true;
         const averAdd = 0.3;
         let lrcAr = [];
         const lrcTime = (ar) => {
            const tmpAr = [];
            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-10 18:22

经典老歌，我很喜欢，我也唱过，有空我发到翻唱版

杨帆发表于 2025-10-10 18:53

本帖最后由杨帆于 2025-10-10 18:57 编辑

姚云裳发表于 2025-10-10 18:22
经典老歌，我很喜欢，我也唱过，有空我发到翻唱版
多才多艺的云裳，内秀于心，外毓于行，歌唱的也很好，期待早日听到你的翻唱版{:4_204:}

梦江南 发表于 2025-10-10 19:11

这歌词怎么没看到？我的浏览器有问题了。

杨帆发表于 2025-10-10 19:13

梦江南发表于 2025-10-10 19:11
这歌词怎么没看到？我的浏览器有问题了。

我这儿显示正常呀

梦江南 发表于 2025-10-10 19:13

好漂亮的一家子动图，赞了！{:4_187:}

樵歌发表于 2025-10-10 19:50

还真的是特效！非常巧妙的制作。{:4_178:}

樵歌发表于 2025-10-10 19:52

梦江南发表于 2025-10-10 19:11
这歌词怎么没看到？我的浏览器有问题了。

我也是回个帖子歌词就飞了，要重新涮一下，再点兔子就有了{:4_189:}

澜天发表于 2025-10-10 20:52

歌声好听
动图有趣
{:4_178:}

杨帆发表于 2025-10-10 21:23

樵歌发表于 2025-10-10 19:52
我也是回个帖子歌词就飞了，要重新涮一下，再点兔子就有了

问好樵歌管理员,不知其因，也许与浏览器有关？

杨帆发表于 2025-10-10 21:24

澜天发表于 2025-10-10 20:52
歌声好听
动图有趣

谢谢澜天老师鼓励，祝开心{:4_191:}

小文发表于 2025-10-10 21:57

好久没有听这首歌了，很喜欢！{:4_204:}

红影发表于 2025-10-10 23:19

漂亮。欣赏扬帆好帖{:4_187:}

樵歌发表于 2025-10-11 06:33

杨帆发表于 2025-10-10 21:23
问好樵歌管理员,不知其因，也许与浏览器有关？

有可能是的，我一评分也是飞了{:4_190:}

梦江南 发表于 2025-10-11 07:46

樵歌发表于 2025-10-11 06:33
有可能是的，我一评分也是飞了

今天看到了，樵歌老师说的没错。

杨帆发表于 2025-10-11 15:19

小文发表于 2025-10-10 21:57
好久没有听这首歌了，很喜欢！

谢谢小文，喜欢就好，祝开心{:4_176:}

杨帆发表于 2025-10-11 15:20

红影发表于 2025-10-10 23:19
漂亮。欣赏扬帆好帖

谢谢影子鼓励，祝开心{:4_204:}

杨帆发表于 2025-10-11 15:21

梦江南发表于 2025-10-11 07:46
今天看到了，樵歌老师说的没错。

问好江南，看到就好{:4_204:}

梦江南 发表于 2025-10-11 17:12

杨帆发表于 2025-10-11 15:21
问好江南，看到就好

很漂亮。赞呢！

偶然~ 发表于 2025-11-17 13:50

来欣赏杨帆的精品佳作，祝您创作如春泉涌流不息！

页: [1] 2

花潮论坛's Archiver

十五的月亮