html旋转音乐图标播放器,css特效之旋转音乐播放器

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

transform

setInerval

使用场景：在移动端页面上方添加一个旋转的音乐图标，音乐暂停，停止旋转，音乐播放，继续旋转，这里使用的是vue。

原理：原理很简单，使用setInerval函数来让图片每100ms旋转一次，旋转用css中的transform方法，将旋转角度设置为全局变量，这样在暂停之后继续播放能接着上次的位置继续旋转

//音乐播放

//音乐暂停

需要用到的变量

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

},

效果图