博客音乐播放器修改显示更多按钮

1、修改显示属性

#handsome_global_player .aplayer-bar-wrap,#handsome_global_player .aplayer-icon.aplayer-icon-lrc,#handsome_global_player .aplayer-volume-wrap {
        display: inline;
        /* opacity:0; */
        transition: all .3s
}

2、修改宽

width: 170px;

.aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: relative;
    right: 0;
    bottom: 4px;
    height: 17px;
    font-size: 11px;
    padding-left: 7px;
    width: 170px;        // 添加这个
}

3、修改距离

    #handsome_global_player .aplayer-volume-wrap {
        margin-left: 10px
    }

4、显示按钮

调试模式查找

.aplayer.aplayer-arrow .aplayer-icon-loop,.aplayer.aplayer-arrow .aplayer-icon-order,.aplayer.aplayer-mobile .aplayer-icon-volume-down {
    /* display: none; */
}

5、显示按钮2

可以看到溢出了，解决方案有两种

  1. 回到2、3、修改合适的宽和距离
  2. 删除不需要显示的 class

继续调试发现这个按钮跟旁白的圆功能重复了 直接给他隐藏了

删除对应的css 样式

最后修改：2024 年 05 月 20 日
© 允许规范转载
咱们谁跟谁，用不着～