css：音乐唱片机随着播放暂停而旋转暂停

唱片机由两部分组成，一个是磁针，另一个是唱片

1. 先完成磁针随着播放按钮进行是否在唱片上的切换

原理：将播放暂停状态存入布尔值isbtnShow中，根据isbtnShow的值切换磁针的class。

css代码

磁针在暂停状态下是 transform: rotate(-13deg);

磁针在播放状态下是 transform: rotate(0deg);

因此添加磁针在播放状态的class

.img_needle_active { width: 2rem; height: 3rem; position: absolute; left: 46%; transform-origin: 0 0; transform: rotate(0deg); transition: all 2s; }

再判断点击播放按钮时将class从.img_needle换为.img_needle_active

为磁针添加动态class，当点击播放按钮时（即isbtnShow=1时），切换磁针的class为img_needle_active

    <!-- 当!isbtnShow时唱片自转磁针转到唱片上 -->
    <img src="@/assets/needle-ab.png" class="img_needle"  :class="{img_needle_active:!isbtnShow}">

2.图片唱片随播放按钮旋转

唱片是通过旋转z轴从0到360度的，使用css3 @keyframes方法创建动画可以实现，再将动画的状态放入class中，通过动态切换class的方法实现唱片的自转和暂停

css代码：

  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }
  .img_ar_active{
    animation-play-state: running;
  }
  .img_ar_paused{
        animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0%{
      transform: rotateZ(0deg);
    }
    100%{
      transform: rotateZ(360deg);
    }

  }

vue代码：

<!-- 当!isbtnShow时唱片自转，isbtnShow时暂停 -->
<img :src="musicList.al.picUrl" class="img_ar" :class="{img_ar_active:!isbtnShow,img_ar_paused:isbtnShow}">

结果：