LMP34-鎏金 皮肤介绍

作者：落寞 | 版本：1.0 | 风格关键词：透明 · 鎏金 · 毛玻璃

一、皮肤名称

LMP34-鎏金（Skin ID：lmp34-liujin）

取名"鎏金"，源于皮肤整体采用金色金属质感作为主色调，配合深邃的暗色背景，呈现出一种古典而华贵的视觉氛围。

LMP34-鎏金 皮肤


skins: 'skins/lmp34-liujin',


二、整体风格

  • 背景：全屏透明覆盖，视频/封面直接铺满整个播放器区域
  • 控制台：底部悬浮圆角毛玻璃面板（半透明黑色 + 高斯模糊）
  • 按钮：圆形鎏金按钮，暗金渐变底色 + 金色描边 + 悬停发光效果
  • 进度条 & 音量条：纯金色填充 + 白色金色描边圆形滑块
  • 歌词：普通行金色（#ffd700）、当前行红色高亮（#ff3333）+ 发光描边
  • 列表 & 设置面板：深绿色半透明 + 金色细边框 + 毛玻璃质感

三、布局结构

窗口模块 位置 层级 功能说明
media（媒体层） 全屏铺满 1 视频播放 / 封面图 + 频谱可视化（下方 40% 区域）
lrc（歌词层） 底部上方居中 5 大字号滚动歌词显示（华文行楷 / 楷体 / 微软雅黑）
console（控制台） 底部居中悬浮 10 播放控制、时间显示、进度条、音量、功能按钮
list（播放列表） 右侧悬浮弹出 20 歌曲树 + 搜索框
option（设置面板） 右侧悬浮弹出 20 皮肤设置、关于、复制嵌入代码等

四、按钮功能一览

按钮标识 位置 功能
bt_play 控制台正中央（大号） 播放 / 暂停切换（播放中呈明亮金色）
bt_prev 播放键左侧 上一首
bt_next 播放键右侧 下一首
bt_mute 控制台右侧 静音 / 取消静音（图标 🔊 ↔ 🔇）
bt_fullscreen 控制台右侧 全屏切换（全屏后自动重排布局）
bt_lrc 控制台右侧 显示 / 隐藏歌词层
bt_list 控制台最右端 打开 / 关闭播放列表面板
bt_close 列表 / 设置面板右上角 关闭当前面板（悬停变红）

五、特色功能

  1. 透明全屏沉浸

    播放器容器 #lmp34-player 采用 position: fixed + 100vw/100vh，背景完全透明，视频或封面直接铺满整个视口，适合嵌入任何页面。

  2. 毛玻璃控制台

    控制条使用 backdrop-filter: blur(8px) 实现半透明毛玻璃效果，圆角 40px，悬浮在视频之上，既不遮挡画面又保持可操作性。

  3. 鎏金按钮交互

    • 悬停：颜色提亮 + 金色边框发光 + 轻微放大（scale 1.06）
    • 按下：缩小反馈（scale 0.95）
    • 播放状态：主播放键切换为明亮金色渐变，白色图标

  4. 歌词彩色高亮 + 发光

    普通歌词行使用金色 #ffd700，当前激活行变为红色 #ff3333 并加粗放大至 40px，配合多层 text-shadow 产生强烈的红色发光描边效果。

  5. 悬停自动淡化

    当鼠标离开播放器区域后，控制台内所有按钮、文字、进度条、音量条自动降至 35% 透明度，避免遮挡视频画面；鼠标返回则立即恢复。

  6. 频谱可视化

    媒体层内置 canvas 频谱模块，占据视频下方 40% 区域，通过绝对定位叠加在视频之上（pointer-events: none，不影响交互）。

  7. 金色滚动条

    播放列表和设置面板的滚动条被定制为金色主题：轨道半透明白色，滑块金色（悬停加深），细窄美观。

  8. 响应式全屏自适应

    窗口尺寸变化时自动重排所有子元素（xywh 布局），全屏切换时重新计算层级和定位，保持布局稳定。

  9. LRC 加载与回退

    支持跨域代理加载远程 LRC 歌词，加载失败自动回退为"仅显示歌曲名"的单行模式，保证视觉上不空洞。

六、文件结构 

skins/lmp34-liujin/
├── skin.xml    — 皮肤布局定义（窗口、按钮、文字、坐标）
├── skin.css    — 鎏金主题样式（毛玻璃、按钮、进度条、歌词）
├── skin.js     — 皮肤脚本钩子（歌词解析、全屏布局、状态响应）

七、总结

LMP34-鎏金 是一款以"透明 + 金色"为核心视觉语言的简洁型控制台皮肤。它摒弃了厚重的背景图片，完全依赖 CSS 渐变、滤镜和阴影来塑造质感，代码量小、加载快、嵌入灵活。适合那些希望播放器与页面背景融为一体的场景。

推荐场景：个人博客嵌入、音乐分享站、带视频封面的播放页面。