1.   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         *{margin: 0;padding: 0}
  4.         .container{
  5.             position: relative;
  6.             width: 600px;
  7.             margin-left: auto;
  8.             margin-right: auto;
  9.         }
  10.         .handle{
  11.             width: 120px;
  12.             height: 200px;
  13.             position: absolute;
  14.             top: 10px;
  15.             left: 117px;
  16.             z-index: 101;
  17.             transform: rotate(-30deg);       
  18.             transform-origin: 30px 30px; //旋转中心点
  19.         }
  20.         .pan{
  21.               width: 300px;
  22.               height: 300px;
  23.               position: absolute;
  24.               top: 125px;   
  25.         }
  26.         .click{
  27.           height: 50px;
  28.           width: 50px;
  29.           border-radius: 50%;
  30.           position: absolute;
  31.           top: 250px;
  32.           left: 125px;
  33.           z-index: 110;
  34.         }
  35.         .play{
  36.             animation: play 2s linear infinite; 
  37.             animation-play-state: running;
  38.         }
  39.         .unplay{
  40.            animation-play-state: paused;
  41.         }
  42.         .move{
  43.             animation: move 2s forwards;
  44.         }
  45.         .unmove{
  46.             animation: unmove 2s forwards;
  47.         }
  48.         @keyframes move{
  49.             0%{
  50.                 transform:rotate(-30deg)
  51.             }
  52.             100%{
  53.                 transform: rotate(0deg)
  54.             }
  55.         }
  56.         @keyframes unmove{
  57.             0%{
  58.                 transform: rotate(0deg)
  59.             }
  60.             100%{
  61.                 transform: rotate(-30deg)
  62.             }
  63.         }
  64.       @keyframes play{
  65.         0%{
  66.                 transform: rotate(360deg)
  68.             }
  69.       }
  70.       @keyframes unplay{
  71.           0%{
  72.               transition: rotate(0deg)
  73.           }
  74.       }
  75.         /* animation-fill-mode:forwards;
  76.         backwards:动画结束时会回到开始位置
  77.             forwards：动画会在结束位置停止
  78.          */
  80.     </style>
  1.  <div class="container">
  2.         <img class="pan " src="images/pan.png" alt="">
  3.         <img class="handle " src="images/shou.png" alt="">
  4.         <img  class="click" src="images/播放.jpg" alt="">
  5.     </div>
  6.     <script>
  7.         var isPlay=false;
  8.         $(".click").click(function(){
  9.             isPlay=!isPlay;
  10.             if(isPlay){
  11.                 $(".handle").addClass("move").removeClass("unmove");
  12.                 $(".pan").addClass("play").removeClass("unplay")
  13.             }else{
  14.                 $(".handle").removeClass("move").addClass("unmove");
  15.                 $(".pan").removeClass("play").addClass("unplay")
  16.             }
  17.         })
  19.     </script>

课件地址：

https://gitee.com/wangsiman/wuhannotebook/blob/master/javascript/js-day13/03music.html