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

效果：
     css光源扫描
  代码：

1. html
3. <div class="light">
4.    <img src="~@/assets/光源.png" alt="">
5. </div>
7. css
8. <style>
9. .light {
10.   position: absolute;
11.   top: 3%;
12.   left: 0;
13.   transform: translate(-50%, -50%);
14.   animation: move 5s infinite;
15.   animation-timing-function: linear;
16.   overflow: hidden;
17.   mix-blend-mode:overlay;  //实现图片重叠混合高亮效果
18. }
20. @keyframes move{
21.   from {
22.     left: calc(0 + 6.25rem);
23.   }
24.   to {
25.     left: calc(100% - 9.375rem);
26.   }
27. }
29. </style>

复制代码

光源图片（下面有图）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。