CSS实现图片旋转&暂停时保持旋转状态（可用于音乐播放）

简述

最近在学习vue，跟着小破站视频学习搞了个简易音乐播放器(对比起其他人写的，实在惭愧。。。)，视频教学中着重于vue，所以对于其中的样式并没有过多提及，再加上小弟基础又差，只能一点一点查然后搬着写。。。。

对于音乐播放器中图片的旋转，我打算用css实现，js要写计时器之类的，基础不行放弃了。在加入以下代码之后，实现了音乐播放时候，对应图片开始i旋转，不过一旦点击暂停，图片会立即恢复0度，不能停留在旋转的状态。

图片旋转CSS代码

.musicImgRotate {animation: rotate 6s linear infinite;}  
@keyframes rotate {/* 这里从来没接触过 直接抄的。。。 */
        0% {
            transform: rotateZ(0deg);
            /*从0度开始*/
        }
        100% {
            transform: rotateZ(360deg);
            /*360度结束*/
        }
    }

停时保持旋转状态（可用于音乐播放）

音乐播放的图片_HTML

 <!-- musicImgRotate与pause为CSS样式，ifPlaying与ifPaused为布尔值 -->
<img id="IMG" v-show="name" :src="musicImg" class="musicImg" 
:class="{musicImgRotate:ifPlaying,pause:ifPaused}">

音乐播放器的控制器(进度条)_HTML

<audio @play="musicPlay" @pause="musicPause" controls autoplay :src="musicUrl">

另外添加CSS代码

    .pause{
        animation-play-state:paused;
    }

JS实现旋转暂停

        musicPlay: function () {
            // console.log("playingmusic");
            this.ifPlaying = true;
            this.ifPaused = false;
        },
        musicPause: function () {
            // console.log("stopingmusic");
            // this.ifPlaying = false;
            this.ifPaused = true ;
        }

参考文献

文章一：CSS+JS实现图片不停旋转 鼠标悬停停止旋转
文章二：vue图片旋转,暂停,继续
文章三：CSS实现图像旋转动态效果