調整Aplayer的歌詞顏色和字型大小顯示

mingkai2004發表於2024-06-12

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

➤微訊號：凱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的部落格園地址，則可能是爬取作者的文章！

➤原文已修改更新！強烈建議點選原文地址閱讀！支援作者!支援原創！

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

一、修改後效果圖如下：

調整Aplayer的歌詞顏色和字型大小顯示

二、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（較深的灰色），以進一步區分當前和非當前歌詞行。
    • 行高、高度、內邊距、外邊距和過渡效果的設定保持不變。

相關文章