css特效之旋轉音樂播放器

本次需要用到的知識點有：

1. transform
2. setInerval

怎么添加背景音樂我會在下一篇介紹 https://www.cnblogs.com/zouwangblog/p/11138734.html

使用場景：在移動端頁面上方添加一個旋轉的音樂圖標，音樂暫停，停止旋轉，音樂播放，繼續旋轉，這里使用的是vue。

原理：原理很簡單，使用setInerval函數來讓圖片每100ms旋轉一次，旋轉用css中的transform方法，將旋轉角度設置為全局變量，這樣在暫停之后繼續播放能接着上次的位置繼續旋轉

  <div>
      <audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>
      <img :src="musicLogo" class="musicLogo" @click="musicPause" :style="{transform: musicRotate}"/>   //音樂播放
      <img v-show="musicTF" :src="off" class="musicLogo" @click="musicPlay"/>                           //音樂暫停
    </div>

需要用到的變量

 musicTF: false,//是否顯示禁止播放
 musicNum: 0,//初始旋轉角度
 musicRotate: "rotate(" + 0 + "deg)",
 interval: null,//定時器

使用方法

/**
       * 暫停音樂並停止旋轉
       */
      musicPause() {
        this.$refs.MusicPlay.pause();
        this.musicTF = true;
        if (this.interval !== null) {
          clearInterval(this.interval);  //停止定時器
        }
      },

      /**
       * 播放音樂並開始旋轉
       */
      musicPlay() {
        this.$refs.MusicPlay.play();
        this.musicTF = false
        this.countMusicNum();
      },

      /**
       * 設置定時器旋轉，這個是放在mouted方法中，需要頁面一加載就旋轉
       */
      countMusicNum() {
        let that = this;
        that.interval = setInterval(function () {
          that.musicNum = that.musicNum + 10;
          that.musicRotate = "rotate(" + that.musicNum + "deg)";
        }, 100);
      },

效果圖