当前位置: 首页 > article >正文

大屏项目使用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>

光源图片(下面有图)


http://www.kler.cn/a/444664.html

相关文章:

  • 【docker】如何打包前端并运行
  • 点击数字层级从 admin.vue 跳转到 inviter-list.vue 组件
  • HCIA-Access V2.5_4_1_1路由协议基础_IP路由表
  • PLE网络中跷跷板现象和负迁移现象说明及其对应的解决方法
  • VUE小数位问题:JS当中toFixed()方法5不进位问题的处理
  • 物联网关:机床设备管理的智能变革“利器”
  • WebSocket vs SSE:实时通信技术的对比与选择
  • Vue2/3 生命周期详细对比与使用指南
  • 2009 ~ 2019 年 408【计算机网络】大题解析
  • 深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互
  • 如何对 Node.js更好的理解?都有哪些优缺点?哪些应用场景?
  • 智能客户服务:AI与大数据的革新力量
  • element plus的table组件,点击table的数据是,会出现一个黑色边框
  • Java 8新特性:Lambda表达式与Stream API的实践指南
  • 编译原理复习---正则表达式+有穷自动机
  • 《Vue 响应式数据原理》
  • 微服务设计原则——功能设计
  • 分布式超低耦合,事件驱动架构(EDA)深度解析
  • C#+OpenCv深度学习开发(常用模型汇总)
  • docker 安装 mysql8.0容器外无法连接