HTML+CSS实现光影划过效果，效果如下方小小图

废话不多说直接上代码

<div class="logo_link">Hello Word!!</div>
<style>
 .logo_link{
width: 200px;
font-size:30px;
}
 .logo_link::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -460px;
  width: 200px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg);
  animation: searchLights 1.5s ease-in 1s infinite;
}

@-webkit-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@-o-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@-moz-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
</style>