css文字亮光划过

<template>
  <div class="box">
    <div class="shine-box">
        <div class="shine-span">玉不啄,不成器;人不学,不知道</div>
    </div>
  </div>
</template>

<script>

export default {

}
</script>
<style scoped>
.shine-box {
  width: 500px;
  height: 100px;
  margin: auto;
  padding-top: 60px;
  border-radius: 10px;
  text-align: center;
  background-color: black;
  font-weight: bolder;
}
.shine-span {
    background: #656565 linear-gradient(to left, transparent, #fff, transparent) no-repeat 0 0;
    background-size: 20% 100%;
    background-position: 0 0;
    height: 100%;
    width: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 2s infinite;
}
@keyframes shine {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 100% 100%;
    }
}
</style>