沒有弄動圖，大概就是懸浮時從0%到100%，一個順時針充滿的效果。

最一開始是想到利用element這的progress環形進度條元件來實現，滑鼠移入時將percentage從0設為100，移除時再設為0即可。

底下的那個圓環不想要灰色、中間不想要文字，可以這樣設定：

/deep/ .el-progress__text{
  display:none;
}
.el-progress /deep/ path:first-child {
  stroke: #cff4e1;
}

後面研究了一下element實現這個的原理，是用svg path 畫圓，再利用 Stroke 屬性，主要是stroke-dasharray 屬性畫虛線的功能。自己寫了一個，程式碼如下：

<template>
  <div>
    <div v-for="(i,index) in showList" :key="index" @mouseover="turnShow(index)" @mouseleave="turnHidden(index)" class="main" :class="{'show':i,'noshow':!i}">
      <svg width="100" height="100">
        <!--底下那個圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke="pink" stroke-width="8px" stroke-linecap="round"/>
        <!--會動的那個圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke-width="0px" stroke-linecap="round"
          stroke
 
-dasharray="0,290"/>
        <text x="18" y="55" fill="red">I love SVG</text>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: [false, false, false, false]
    }
  },
  methods: {
    turnShow(index) {
      
 
this.$set(this.showList, index, true)
    },
    turnHidden(index) {
      this.$set(this.showList, index, false)
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  width:100px;
  display:inline-block;
  margin-right:100px;
}
.show{
  path:nth-child(2){
    stroke:red;
    stroke-width: 8px;
    stroke-dasharray: 290,290;
    transition: stroke-dasharray 0.6s;
  }
}
.noshow{
  path:nth-child(2){
    stroke:pink;
    // 消失的時候不需要漸變消失就用這行
    // stroke-width: 0px;
    stroke-width: 8px;
    stroke-dasharray: 0,290;
    // 消失的時候不需要漸變消失就用這行
    // transition: stroke-dasharray 0.6s
    // 設定顏色變化的延時時間為0.5s是大概試出來的一個時間，不是絕對完美
    // 設為0.6的話滑鼠移動很快的話，會感覺很不順暢
    transition: stroke-dasharray 0.6s,stroke 0s linear 0.5s;
  }
}
</style>

參考連結：

svg path畫圓看的這篇：https://blog.csdn.net/cdc_csdn/article/details/80473541