背景音乐

css部分的代码如下，用css做到音乐按钮的定位以及旋转效果

.musicBtn{
    position: absolute;
    top: 23px;
    right: -280px;
    -webkit-animation: zhuan 2s linear infinite;
    /*-webkit-内核  动画     zhuan 名称  2s时间  linear匀速执行 infinite 无限执行*/
}
/*定义一个动画*/
/*@ 出来的-*- 是不同浏览器的内核，webkit也是手机浏览器的内核 */
@-webkit-keyframes zhuan{
    /*from 初始状态*/
    from{transform: rotate(0deg);}
    /*to 最后状态*/
    to{transform: rotate(360deg);}

用js做到音乐的开始与暂停，并达到转换图标的效果

        <!--onclick=zhuan(this) 点击事件   zhuan()是一个方法  zhuan只是一个名称  this是 当前的标签   有了onclick，那么id就可以不用了，也可以保留即不起作用了-->
        <img src="img/musicBtn.png" class="musicBtn" <!--id="pic_musicBtn-->" onclick="zhuan(this)"/>
        <audio src="img/Taylor Swift - We Are Never Ever Getting Back Together 1.mp3"
             preload="auto" autoplay="autoplay" id="player"></audio>
    </body>
    <!--一下是js的代码-->
    <script type="text/javascript">
        function zhuan(img){  //function 是一个方法 这个点击的方法的名字对应着标签的oncick属性的值  img就是this
            if(player.paused){//根据音乐播放的状态，判断
                player.play();//调用音乐的播放的方法
                img.src="img/musicBtn.png";//重新设置图片的路径
            }else{
                player.pause();//调用音乐的暂停的方法
                img.src="img/musicBtnOff.png";//重新设置图片的路径
            }
        }
    </script>

改变图片只需要改变图片的路径即可，player.ply();和player.paue();可以直接使用。