标题移动光效

效果如下

添加样式属性

<template>
    <div class="son1">
       <img src="../../public/static/img/2.png" />
    </div>
</template>

son1样式

<style lang="less" scoped>
.son1 {
  &::after {
    content: "";
    width: 40px;
    height: 66%;
    transform: skewX(30deg);  //调整倾斜角度
    position: absolute;
    top: 25px;
    left: 160px;
    background: linear-gradient(342deg, transparent, #78aec6fa, transparent); //渐变色
    animation: linghtFram 2.5s linear infinite;
    z-index: 1;
  }
}

@keyframes linghtFram {
  
  0%{
    top: 30px;
    left: 30%;
  }

  30% {
    top: 30px;
    left: 70%;
    opacity: 0;
  }

  100%{
    top: 30px;
    left: 180%;
    opacity: 0;
  }
}
</style>

整体思路

• 动画执行0%时 光条移动30%，
• 动画执行30%时 光条移动了70%的距离 并设置为透明
• 此时动画并没有结束，所以光条在隐形状态中继续移动，
• 直到动画在100%时，光条移动了180%时，一次循环结束。
• 这样设置是为了，视觉效果看循环更加流畅