html通过自适应制作手机端音乐播放器

html通过自适应制作手机端音乐播放器

      实现效果：

    

实现思路：

    1、布局：

    (1)、将手机的宽度进行10等分  为10rem

    (2)。通过rem定义各个元素的宽高、间距、字体大小

    (3)、通过CSS3语法定义头像的旋转动画功能

    2、js部分

    (1)、通过开关按钮控制控制音频的开和关，头像旋转的开和关

    (2)、通过监听音频的时间变化事件改变进度条的进度画面。

    (3)、点击下一页、上一页切换歌曲，变化歌手名和歌名

布局图：