遮罩层的流光效果

<div class="box"> <h1>冰糖雪梨</h1> </div>

css：

.box {
  width: 300px;
  margin: 20px auto;
  outline: 1px solid red;
  font-size: 20px;
  text-align: center;
}

.box h1 {
  background-image: linear-gradient(to right, red, blue, lightblue, lightgreen, red, blue, lightblue, lightgreen);
  background-size: 50% 100%;
  /* 文字填充透明 */
  -webkit-text-fill-color: transparent;
  /* 背景剪裁 */
  -webkit-background-clip: text;
  /* css3的动画 infinite循环播放*/
  /* animation:lmx 2s ease-in-out infinite; */
  animation: lmx 2s ease-in-out infinite;
}

/* 设置关键帧 */
@keyframes lmx {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

效果演示：