大屏项目使用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>
光源图片(下面有图)