调整Aplayer的歌词颜色和字体大小显示

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

➤微信号：凯Pro（Mingkai0316）

➤电子邮箱：ymk2004@qq.com

➤博主域名：https://www.striving.me

➤GitHub地址：https://github.com/ymk2004

➤语雀地址：https://yuque.com/ymk2004

➤原文地址：https://www.cnblogs.com/mingkai2004/p/18231604

➤如果链接不是Mingkai的博客园地址，则可能是爬取作者的文章！

➤原文已修改更新！强烈建议点击原文地址阅读！支持作者!支持原创！

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

---

一、修改后效果图如下：

---

二、CSS代码修改

（1）当前播放歌词行样式 (.aplayer-lrc p.aplayer-lrc-current):

• 源css代码如下：

.aplayer .aplayer-lrc p.aplayer-lrc-current {opacity:1;overflow:visible;height:auto!important;min-height:16px
}

• 修改后的css代码如下：

/* 选择器定位到具有aplayer-lrc类和当前正在播放的歌词行的元素 */
.aplayer .aplayer-lrc p.aplayer-lrc-current {/* 增加了字体大小，从12px修改为17px，以使当前行更突出 */font-size: 17px;/* 改变了颜色，从灰色（#666）修改为亮蓝色（#1b82f1），以高亮显示当前行 */color: #1b82f1;/* 保持不透明，与之前相同 */opacity: 1;/* 允许内容溢出，与之前相同 */overflow: visible;/* 强制高度自动调整，与之前相同 */height: auto !important;/* 设置最小高度，与之前相同 */min-height: 16px;
}

• css代码修改前后变化：

  • 字体大小从12px增加到17px，以更突出显示当前播放的歌词。
  • 文本颜色从#666（灰色）更改为#1b82f1（亮蓝色），以高亮显示当前播放的歌词行。
  • 其他样式，如透明度、溢出、高度和最小高度的设置保持不变。

---

（2）普通歌词行样式 (.aplayer .aplayer-lrc p):

• 源css代码如下：

.aplayer .aplayer-lrc p {font-size:12px;color:#666;line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;transition:all .5s ease-out;opacity:.4;overflow:hidden
}

• 修改后的css代码如下：

/* 选择器定位到所有具有aplayer-lrc类和p标签的元素，但不包括当前正在播放的歌词行 */
.aplayer .aplayer-lrc p {/* 新增了font-weight属性，设置为700，即加粗字体，以增强普通歌词的可读性 */font-weight: 700;/* 调整了字体大小，从12px修改为15px，使普通歌词的字体略小于当前行，以区分 */font-size: 15px;/* 调整了颜色，从灰色（#666）修改为较深的灰色（#777），以区分当前和非当前歌词行 */color: #777;/* 保持行高和高度的设置，与之前相同 */line-height: 16px !important;height: 16px !important;/* 移除内边距和外边距的设置，与之前相同 */padding: 0 !important;margin: 0 !important;/* 过渡效果设置，与之前相同 */transition: all 0.5s ease-out;/* 保持不透明度为0.4 */opacity: .4;/* 隐藏溢出内容的设置，与之前相同 */overflow: hidden;
}

• css代码修改前后变化：

• • 新增了font-weight: 700;，使得普通歌词加粗，以增强可读性。
  • 字体大小从12px调整为15px，略小于当前播放的歌词行，以区分当前和非当前歌词。
  • 文本颜色从#666（灰色）更改为#777（较深的灰色），以进一步区分当前和非当前歌词行。
  • 行高、高度、内边距、外边距和过渡效果的设置保持不变。

---