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

---

一、To Do List

• 高亮显示当前歌词句！

• 增强非当前歌词句和当前歌词句的区别性！

• 删除歌词文本阴影，减少白色背景下的字体灰色阴影，增强美观感！

---

二、预期效果

---

三、修改过程

（1）当前播放歌词句行样式

(.aplayer-lrc p.aplayer-lrc-current):

1. 源css代码：

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

2. 修改后的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;
}

3. css代码前后变化：

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

---

（2）非当前歌词句行样式

(.aplayer .aplayer-lrc p):

1. 源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
}

2. 修改后的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;
}

3. css代码前后变化：

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

---

（3）文本阴影效果text-shadow

CSS中可以通过text-shadow属性为文本添加阴影效果。如果歌词字体后面有阴影，可能是因为CSS代码中使用了text-shadow属性。这个属性允许你定义文本的阴影效果，包括阴影的颜色、模糊半径、水平偏移和垂直偏移。

1.源css代码：

.aplayer.aplayer-fixed .aplayer-lrc {
	display:block;
	position:fixed;
	bottom:10px;
	left:0;
	right:0;
	margin:0;
	z-index:98;
	pointer-events:none;
    /*text-shadow属性在这里被用来为歌词文本添加两层白色阴影，第一层模糊半径较小（1像素），第二层模糊半径较大（10像素）。*/
	text-shadow:0 0 1px #fff,0 0 10px #fff
}

2.修改后的css代码：

.aplayer.aplayer-fixed .aplayer-lrc {
    /* 将元素的显示类型设置为块级元素 */
    display: block;
    /* 将元素的定位设置为固定定位，这意味着它相对于浏览器窗口进行定位 */
    position: fixed;
    /* 设置元素距离底部的位置为10像素 */
    bottom: 10px;
    /* 设置元素距离左侧的位置为0，即页面的最左边 */
    left: 0;
    /* 设置元素距离右侧的位置为0，即页面的最右边 */
    right: 0;
    /* 将元素的外边距设置为0，不增加额外的空间 */
    margin: 0;
    /* 设置元素的堆叠顺序，数值越大，元素越靠上 */
    z-index: 98;
    /* 使元素不接受鼠标事件，如点击 */
    pointer-events: none;
    /* 移除文本的阴影效果 */
    text-shadow: none;
}

   直接将text-shadow对应的值改为none，即text-shadow: none;

---