vue,css实现像唱片一样的旋转效果

<template>
<div>

  <el-image
      class="slow-rotate"
      style="width: 500px; height: 500px"
      src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d708c87ce07048deabc8cae071fa9aed~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?"
      fit="cover"
  ></el-image>

</div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Record"
}
</script>

<style scoped>
.slow-rotate {
  border-radius: 50%;
  transform-origin: center;

  animation: rotate 9s linear infinite;
}
.slow-rotate:hover{
  animation-play-state: paused;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

效果展示
【css，vue实现像唱片一样的旋转效果】 https://www.bilibili.com/video/BV1ws4y1z7Gp/?share_source=copy_web&vd_source=58607fc67d165b8caff1ed8bfcefd35b