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


      实现效果:

    




实现思路:

    1、布局:

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

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

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

    2、js部分

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

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

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


布局图:



   实现代码:


    index.html:


<!DOCTYPE html>
<html lang="en">
<head

本文转载:CSDN博客