大屏项目使用css混合实现光源扫描高亮效果

效果：

css光源扫描

代码：

html

<div class="light">
   <img src="~@/assets/光源.png" alt="">
</div>

css
<style>
.light {
  position: absolute;
  top: 3%;
  left: 0;
  transform: translate(-50%, -50%);
  animation: move 5s infinite;
  animation-timing-function: linear;
  overflow: hidden;
  mix-blend-mode:overlay;  //实现图片重叠混合高亮效果
}

@keyframes move{
  from {
    left: calc(0 + 6.25rem);
  }
  to {
    left: calc(100% - 9.375rem);
  } 
}

</style>

光源图片（下面有图）