vue做的一个一点就转的转盘（音乐磁盘），点击停止时会在几秒内缓慢停止，再次点击按钮可以再次旋转，

先看效果：

代码：主要部分我会红线画出来

css:部分：

源码：

vue部分：

css部分：

@import "var.scss";


.song-lyric {
  // margin: auto;
  // margin-top: $header-height + 20px;
  width: 100%;
  height: 100%;
  // background-color: $color-white;
  border-radius: 12px;
  display: block;
  background-color: rgb(167, 167, 167);
  // padding: 0 20px 50px 20px;
  // background-color: rgba(0,0,0,.55);
  font-family: $font-family;

  // background-size: cover;
  // filter: blur(30px);
  z-index: 1;

  .lyric-title {
    text-align: center;
	  width: 50%;
    height: 100vh;
		overflow-y: scroll;
    line-height: 60px;
    border-bottom: 2px solid $color-black;
	margin-top: 50px;
	// background: rgba(21, 21, 21, 0.6);
	background-color: rgba(0,0,0,.65);

	z-index: 2;
  }

  .type{
	  display: flex;
	  text-align: center;
	    width: 100%;
	  height: 100vh;
	  	overflow: hidden;
	  line-height: 60px;
	  border-bottom: 2px solid $color-black;
	  z-index: 2;
  }
  .right{
	  text-align: center;
	    width: 50%;
	  height: 100vh;
	  	overflow: hidden;
	  line-height: 60px;
	  border-bottom: 2px solid $color-black;
	  margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
	  // background: rgba(21, 21, 21, 0.6);
	  background-color: rgba(0,0,0,.65);
	  // backdrop-filter: blur(4px);
	  // box-shadow: inset 0px 1px 6px rgba(255,255,255,0.6), 2px 2px 15px rgba(0,0,0,0.5);
	  z-index: 2;
  }
  
  .right-top{ //指针
    position: absolute; 
	z-index: 1; 
	width: auto; 
	left:45%; 
	top:117px; 
	height:200px;
	
	transition: transform 0.7s linear;  transform: rotate(-30deg) translate(35px , -10px); 
  }
   
  .rotated {
    transform: rotate(0deg);
  }
  
  

  .right-center{
    position: relative;
    width: 600px;
    height: 1000px;
    // background-color: rgb(206, 198, 198);
  }

  .has-lyric {
    font-size: 18px;
    width: 100%;
    min-height: 100%;
    text-align: center;
	padding-top: 120px;
    li {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }

  .no-lyric {
    // margin: 200px 0;
	padding: 200px 0 0 0;
    width: 100%;
    text-align: center;

    span {
      font-size: 18px;
      text-align: center;
    }
  }
}

.lyric-fade-enter,
.lyric-fade-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

.lyric-fade-enter-active,
.lyric-fade-leave-active {
  transition: all 0.3s ease;
}

.tight-bottm{ //圆
    position: absolute;
    top:225px;  
    width: 400px; 
    left:18%; 
    height:400px; 
    border-radius: 50%;
	transition: transform 0.7s linear;
	
  }
  
  .active {
	  animation: none !important;
    // animation: spin 5s linear infinite;
  }
  
  // @keyframes spin {
  //   100% {
  //     transform: rotate(360deg);
  //   }
  // }