论坛 › 欢乐水吧 › 【月满花潮庆华诞】小夜曲，千百惠

梦江南 发表于 2025-10-18 10:30

【月满花潮庆华诞】小夜曲，千百惠

本帖最后由 梦江南 于 2025-10-18 14:47 编辑 <br /><br /><style>

#papa {width: 1280px;height: 720px;background: url('https://s21.ax1x.com/2025/10/18/pVLlYHx.jpg')no-repeat center/cover;grid;place-items: center;border-radius:32px;}

.lrc{ position: absolute;top:20px; left:5px;width: 860px;height: 550px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/z-index: 9;overflow: hidden;display: block;margin: 20px -150px;/*歌词调整：上下 左右*/}

.lrc #ullrc{width: 100%;padding: 0;list-style: none;transition: 0.3s all ease;margin: 0;}

.lrc #ullrc li{height: 50px;line-height: 50px;font-family:悟空大字库;font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #000078; font-weight: normal;transition: .3s all ease;/*一定要加上不然看着突兀*/list-style-type: none;

text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/display: block;width: 100%;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);margin: 0 auto;}

.lrc #ullrcli.active{ font-size: 30px;color: #ff0000;text-align:center;transform: translate(0%,0%);font-weight: normal;

filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);}
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:80%;bottom: 2%;font-size: 15px; z-index: 9;}

</style>
<divstyle="width:1280px;height:720px;position:absolute;margin:100px -340px;z-index:99999;">
<div id="papa">
<div class="lrc"><ul id="ullrc"></ul></div>
<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 5%;left: 72%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                clip-path: @shape(
                points: 360;
            r: abs.sin.tan(sin(3.5t)*1.14);
      );
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=284174.mp3" autoplay loop></audio>
<span id="bt">月光小夜曲</span>
</div>
</div>
<script>
(function() {let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>
<script >
var lrc = `月亮在我窗前荡漾
透进了爱的光芒
我低头静静地想一想
猜不透你心肠
好像今晚月亮一样
忽明忽暗又忽亮
啊~
到底是爱还是心儿慌
啊~ 月光
......
月夜情境像梦一样
那甜蜜怎能相忘
细语又在耳边荡漾
怎不叫我回想
我怕见那月亮光
抬头把窗帘拉上
啊~
我心儿醉心儿慌
啊~ 月光
......
月亮在我窗前荡漾
透进了爱的光芒
我低头静静地想一想
猜不透你心肠
好像今晚月亮一样
忽明忽暗又忽亮
啊~
到底是爱还是心儿慌
啊~ 月光
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;
function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 50, lrc_ul_height = 250;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
lrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>lrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => lrc.style.animationPlayState = 'paused');
</script>

<div style="width:100%;height:960px;position:relative;"></div>

梦油 发表于 2025-10-18 12:43

小夜曲旋律优美、委婉、缠绵，我很喜欢。谢谢江南！

澜天 发表于 2025-10-18 12:43

听到声音
但是文
歪到一边啦

梦江南 发表于 2025-10-18 13:31

梦油 发表于 2025-10-18 12:43
小夜曲旋律优美、委婉、缠绵，我很喜欢。谢谢江南！

问好梦油，谢谢你的喜欢。

梦江南 发表于 2025-10-18 13:32

澜天 发表于 2025-10-18 12:43
听到声音
但是文
歪到一边啦

澜天是图片是看不到了。歌词是在左边的。

红影 发表于 2025-10-18 13:48

这个制作好美，对月思人，图中的女子好漂亮。
欣赏江南好帖{:4_199:}

梦江南 发表于 2025-10-18 13:52

红影 发表于 2025-10-18 13:48
这个制作好美，对月思人，图中的女子好漂亮。
欣赏江南好帖

问好影子，谢谢欣赏鼓励。{:4_204:}

梦油 发表于 2025-10-18 13:57

梦江南 发表于 2025-10-18 13:31
问好梦油，谢谢你的喜欢。

我喜欢红歌老歌和严肃音乐。比如：蓝色多瑙河等

梦江南 发表于 2025-10-18 14:48

澜天 发表于 2025-10-18 12:43
听到声音
但是文
歪到一边啦

澜天，图片换了地址，你能看到吗？

梦江南 发表于 2025-10-18 14:49

梦油 发表于 2025-10-18 13:57
我喜欢红歌老歌和严肃音乐。比如：蓝色多瑙河等

这些歌也挺好听的。

梦油 发表于 2025-10-18 15:40

梦江南 发表于 2025-10-18 14:49
这些歌也挺好听的。

看来，我们有相近的爱好。

梦江南 发表于 2025-10-18 15:47

梦油 发表于 2025-10-18 15:40
看来，我们有相近的爱好。

基本上差不多。

小辣椒 发表于 2025-10-18 16:42

很喜欢的一首月光小夜曲{:4_208:}

小辣椒 发表于 2025-10-18 16:45

背景图片，一个大大的月亮，美女眼望月亮，美美的效果{:4_205:}

小辣椒 发表于 2025-10-18 16:45

欣赏阿姨好制作，意境美美的

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

小辣椒 发表于 2025-10-18 16:42
很喜欢的一首月光小夜曲

这首歌的音乐节奏很喜欢，所以选她做了一帖。千百惠的老歌。{:4_204:}

梦江南 发表于 2025-10-18 17:13

小辣椒 发表于 2025-10-18 16:45
背景图片，一个大大的月亮，美女眼望月亮，美美的效果

这叫豆包做的。要融合歌词的内容才有看点呢。你说是不！{:4_189:}

梦江南 发表于 2025-10-18 17:14

小辣椒 发表于 2025-10-18 16:45
欣赏阿姨好制作，意境美美的

谢谢小辣椒欣赏鼓励。{:4_187:}

澜天 发表于 2025-10-18 18:58

梦江南 发表于 2025-10-18 13:32
澜天是图片是看不到了。歌词是在左边的。

现在好了
原来看不到图片
就一个框子
文字跑到名字下面了
估计是网速问题

澜天 发表于 2025-10-18 19:05

梦江南 发表于 2025-10-18 14:48
澜天，图片换了地址，你能看到吗？

现在特别好啊
很漂亮的图呢

查看完整版本: 【月满花潮庆华诞】小夜曲，千百惠