蓝月亮

马黑黑 发表于 2026-9-15 20:49

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334.mp4" autoplay loop muted></video>
<div id="moon"></div>
</div>

<script>
var gc = `蓝月亮\n歌手：阿果\n那凉山的蓝月亮\n你又飘进了我梦里\n梦里你成了我的新娘\n成了我的幸福\n你蔚蓝的双眼\n隐藏着你的幸福\n你飘逸的黑发\n洋溢着你的甜美\n你蓝色的温柔\n是我一生的守侯\n你羞涩的脸庞\n是我永远的牵挂\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\nmusic ...\n那凉山的蓝月亮\n你又飘进了我梦里\n梦里你成了我的新娘\n成了我的幸福\n你蔚蓝的双眼\n隐藏着你的幸福\n你飘逸的黑发\n洋溢着你的甜美\n你蓝色的温柔\n是我一生的守侯\n你羞涩的脸庞\n是我永远的牵挂\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\n疼爱的永远是你\n疼爱的永远是你`;

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

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

function tzRun() {
   var aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, gc, 0);
}

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>

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w9/bm.webp') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { top: -25%; }
#moon { position: absolute; top: 10%; width: 100px; height: 100px; background: transparent; border-radius: 50%; box-shadow: 30px 8px 5px blue; transform: rotate(-8deg); animation: swear 1.5s linear infinite alternate var(--state); }
#moon::after { position: absolute; content: ''; inset: 4px -30px -6px 60px; cursor: pointer; }
#lrc { bottom: 60px; color: lightblue; --color1: lightblue; --color2: blue; }
#msvg { position: absolute; width: 12vw; height: 12vw; top: 15%; transition: .75s; opacity: 1; }
@keyframes swear { to { transform: rotate(8deg); } }
</style>

马黑黑 发表于 2026-9-15 20:51

帖子代码

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334.mp4" autoplay loop muted></video>
<div id="moon"></div>
</div>

<script>
var gc = `蓝月亮\n歌手：阿果\n那凉山的蓝月亮\n你又飘进了我梦里\n梦里你成了我的新娘\n成了我的幸福\n你蔚蓝的双眼\n隐藏着你的幸福\n你飘逸的黑发\n洋溢着你的甜美\n你蓝色的温柔\n是我一生的守侯\n你羞涩的脸庞\n是我永远的牵挂\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\nmusic ...\n那凉山的蓝月亮\n你又飘进了我梦里\n梦里你成了我的新娘\n成了我的幸福\n你蔚蓝的双眼\n隐藏着你的幸福\n你飘逸的黑发\n洋溢着你的甜美\n你蓝色的温柔\n是我一生的守侯\n你羞涩的脸庞\n是我永远的牵挂\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\n蓝月亮凉山的蓝月亮\n不管幸福等多久\n疼爱的永远是你\n疼爱的永远是你\n疼爱的永远是你`;

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

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

function tzRun() {
   var aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, gc, 0);
}

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>

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w9/bm.webp') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { top: -25%; }
#moon { position: absolute; top: 10%; width: 100px; height: 100px; background: transparent; border-radius: 50%; box-shadow: 30px 8px 5px blue; transform: rotate(-8deg); animation: swear 1.5s linear infinite alternate var(--state); }
#moon::after { position: absolute; content: ''; inset: 4px -30px -6px 60px; cursor: pointer; }
#lrc { bottom: 60px; color: lightblue; --color1: lightblue; --color2: blue; }
#msvg { position: absolute; width: 12vw; height: 12vw; top: 15%; transition: .75s; opacity: 1; }
@keyframes swear { to { transform: rotate(8deg); } }
</style>

马黑黑 发表于 2026-9-15 20:57

帖子CSS放后面也是一种规范，通常用于确保后续设置能够覆盖前面（引用）的样式。本帖，由于原生lrc歌词插件的特殊性，即选择器 #lrc 的 color、--color1、--color2 属性的先前设置由JS的追加样式，帖子CSS后置更能确保后续设置的覆盖功能

马黑黑 发表于 2026-9-15 20:58

蓝月亮有不同的曲子，阿果的这支我认为是最好的，至少是我最喜欢的

马黑黑 发表于 2026-9-15 21:02

蓝月亮图案使用 div 制作，通过CSS #moon 选择器实现外观属性：圆形形状，背景透明，通过蓝色阴影达成最终外观。#moon 伪元素用于呈现手型指针+范围指示（inset 属性基本覆盖阴影范围）

杨帆发表于 2026-9-15 21:11

马黑黑发表于 2026-9-15 20:58
蓝月亮有不同的曲子，阿果的这支我认为是最好的，至少是我最喜欢的

是，更喜欢这个版本。谢谢马老师精彩分享{:4_190:}

小辣椒 发表于 2026-9-15 21:26

马黑黑发表于 2026-9-15 20:57
帖子CSS放后面也是一种规范，通常用于确保后续设置能够覆盖前面（引用）的样式。本帖，由于原生lrc歌词插件 ...

这个可以自己修改歌词颜色了

小辣椒 发表于 2026-9-15 21:27

这首蓝月亮是抒情歌曲，黑黑喜欢抒情的{:4_170:}

小辣椒 发表于 2026-9-15 21:28

画面和播放器月亮很相配，制作漂亮{:4_199:}

霜染枫丹 发表于 2026-9-15 21:50

赞佩马老师的佳作。欣赏学习~~{:4_204:}{:4_190:}

宕.. 发表于 2026-9-15 22:10

哇哇塞，真被这颗蓝月亮给幸福到了，澄蓝绚烂，黑黑很有浪漫情怀哟！

红影发表于 2026-9-15 22:41

这样氛围里的播放器月亮好美，欣赏黑黑好帖{:4_199:}

杨帆发表于 2026-9-16 14:32

马黑黑发表于 2026-9-15 21:02
蓝月亮图案使用 div 制作，通过CSS #moon 选择器实现外观属性：圆形形状，背景透明，通过蓝色阴影达成最终 ...

漂亮的蓝月亮，谢谢马老师经典示范{:4_180:}

马黑黑 发表于 2026-9-16 22:27

杨帆发表于 2026-9-16 14:32
漂亮的蓝月亮，谢谢马老师经典示范

{:4_190:}

马黑黑 发表于 2026-9-16 22:27

红影发表于 2026-9-15 22:41
这样氛围里的播放器月亮好美，欣赏黑黑好帖

晚上嚎

马黑黑 发表于 2026-9-16 22:28

宕.. 发表于 2026-9-15 22:10
哇哇塞，真被这颗蓝月亮给幸福到了，澄蓝绚烂，黑黑很有浪漫情怀哟！

{:4_173:}

马黑黑 发表于 2026-9-16 22:28

霜染枫丹发表于 2026-9-15 21:50
赞佩马老师的佳作。欣赏学习~~

晚上好

马黑黑 发表于 2026-9-16 22:28

小辣椒发表于 2026-9-15 21:28
画面和播放器月亮很相配，制作漂亮

{:4_191:}

马黑黑 发表于 2026-9-16 22:29

杨帆发表于 2026-9-15 21:11
是，更喜欢这个版本。谢谢马老师精彩分享

{:5_108:}

马黑黑 发表于 2026-9-16 22:30

小辣椒发表于 2026-9-15 21:26
这个可以自己修改歌词颜色了

就是注意一下这个原生歌词同步JS插件的样式制定比较霸道，覆盖修改歌词颜色需要将帖子的 style 标签放在JS标签的后面

页: [1] 2

花潮论坛's Archiver

蓝月亮