css特效之旋转音乐播放器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本次需要用到的知识点有：

transform
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);

      },