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

server/2024/12/22 2:47:01/

效果:

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.ppmy.cn/server/152104.html

相关文章

【计算机网络】应用层

1. 域名系统 DNS 1.1 域名系统概述 域名系统 DNS (Domain Name System) &#xff1a; 互联网使用的命名系统。 用来把人们使用的机器名字&#xff08;域名&#xff09;转换为 IP 地址。 为互联网的各种网络应用提供了核心服务。 域名采用层次树状结构的命名方法。 DNS 是…

【Rust自学】4.4. 引用与借用

4.4.0 写在正文之前 这一节的内容其实就相当于C的智能指针移动语义在编译器层面做了一些约束。Rust中引用的写法通过编译器的约束写成了C中最理想、最规范的指针写法。所以学过C的人对这一章肯定会非常熟悉。 喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文…

手机银行模拟器,一款高仿真银行app的模拟器,可以修改姓名 卡号 余额 做转账记录 做流水

&#x1f4f1;手机银行模拟器让你自由定制你的金融生活。无论是流水账单、金额&#xff0c;还是个人信息&#xff0c;一切都可以按照你的意愿来模拟修改&#xff0c;让你体验模拟器带来的快乐&#xff01; 链接&#xff1a;https://pan.quark.cn/s/c2f614f3447f 提取码&#…

搭建springmvc项目

什么是springmvc MVC它是一种设计理念。把程序按照指定的结构来划分: Model模型 View视图 Controller控制层 springmvc框架是spring框架的一个分支。它是按照mvc架构思想设计的一款框架。 springmvc的主要作用: 接收浏览器的请求数据&#xff0c;对数据进行处理&#xff0c;…

设计模式之 abstract factory

适用场景 一个系统要独立于它的产品的创建、组合和表示时。一个系统要由多个产品系列中的一个来配置时。当你要强调一系列相关的产品对象的设计以便进行联合使用时。当你提供一个产品类库&#xff0c;而只想显示它们的接口而不是实现时 架构演示 首先client这个东西可以接触到…

12.16 深度学习-混合注意力CBAM

# 混合注意力机制&#xff08;Hybrid Attention Mechanism&#xff09;是一种结合空间和通道注意力的策略&#xff0c;旨在提高神经网络的特征提取能力。 # 空间和通道都加上去 # CBAM是一种轻量级的注意力模块&#xff0c;它通过增加空间和通道两个维度的注意力&#xff0c;来…

word实现两栏格式公式居中,编号右对齐

1、确定分栏的宽度 选定一段文字 点击分栏&#xff1a;如本文的宽度为22.08字符 2、将公式设置为 两端对齐&#xff0c;首行无缩进。 将光标放在 公式前面 点击 格式-->段落-->制表位 在“制表位位置”输入-->11.04字符&#xff08;22.08/211.04字符&#xff09;&…

arcgisPro相接多个面要素转出为完整独立线要素

1、使用【面转线】工具&#xff0c;并取消勾选“识别和存储面邻域信息”&#xff0c;如下&#xff1a; 2、得到的线要素&#xff0c;如下&#xff1a;