CSS实现的扫光效果组件


theme: lilsnake

图片和内容如有侵权,及时与我联系~
详细内容与注释:

CSS实现的扫光效果组件

代码

技术栈与框架

Vue3

CSS

扫光效果的原理

扫光效果的原理就是从左到右无限循环的一个位移动画
在这里插入图片描述

实现方式

适配文字扫光效果的css

.shark-box { /* 文字样式 */font-size: 60px; font-weight: normal; /* 扫光样式-文字 */ -webkit-text-fill-color: transparent; background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60% ) -100% / 50% no-repeat currentColor; -webkit-background-clip: text; animation: shark-box 2s infinite; } 
/* 文字 */ 
@keyframes shark-box { from { background-position: -100%; } to { background-position: 200%; } 
}
效果图

请添加图片描述

适配图片扫光效果的css

/* 图片扫光样式 */ 
.card { display: flex; justify-content: center; align-items: center; img { display: block; border-radius: 8px; } 
} 
/* 伪元素实现图片扫光 */ 
.shark-img { //定位图片,超出隐藏 position: relative; overflow: hidden; img { object-fit: cover; } &::after { content: ""; position: absolute; inset: -20%; background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60% ); animation: shark-img 2s infinite; transform: translateX(-100%); } 
} 
/* 图片 */ 
@keyframes shark-img {to { transform: translateX(100%); } 
}
效果图

请添加图片描述

针对不规则样式

 <!-- 针对不规则图形,增加 -webkit-mask 配置 --><divclass="shark-img card"v-else-if="props.src":style="props.src.includes('png')? {mask: `url(${props.src}) no-repeat center / cover`,'-webkit-mask': `url(${props.src}) no-repeat center / cover`,}: {}"><img :src="props.src" alt="未找到图片" /></div>
效果图

请添加图片描述

组件代码

https://code.juejin.cn/pen/7394752941250314250

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stable Diffusion基本原理通俗讲解

Stable Diffusion是一种基于深度学习的图像生成技术&#xff0c;它属于生成对抗网络&#xff08;GANs&#xff09;的一种。简单来说&#xff0c;Stable Diffusion通过训练一个生成器&#xff08;Generator&#xff09;和一个判别器&#xff08;Discriminator&#xff09;&#…

【linux】Shell脚本三剑客之sed命令的详细用法攻略

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

【OSS对象存储】Springboot集成阿里云OSS + 私有化部署Minio

【OSS对象存储】Springboot集成阿里云OSS 私有化部署Minio 一、摘要二、POM依赖三、配置文件四、表结构设计五、代码实现5.1 代码包结构5.2 API封装5.3 增删改查 六、扩展6.1 Minio配置https访问 一、摘要 掌握阿里云OSS、私有化部署Minio两种对象存储的使用方式运用工厂策略…

Blender 4.2 安装GIS插件步骤

Blender 4 更新以后插件安装变得复杂&#xff0c;插件界面的安装按钮不显示&#xff0c;界面布局改变&#xff0c;怎么安装插件&#xff1a; 1. 在线安装&#xff1a; “编辑”&#xff08;Edit&#xff09;>进入偏好设置&#xff08;Preferences setting&#xff09;>…

机械学习—零基础学习日志(高数10——函数图形)

零基础为了学人工智能&#xff0c;真的开始复习高数 函数图像&#xff0c;开始新的学习&#xff01;本次就多做一做题目&#xff01; 第一题&#xff1a; 这个解法是有点不太懂的了。以后再多研究一下。再出一道题目。 张宇老师&#xff0c;比较多提示了大家&#xff0c;一定…

设计模式12-构建器

设计模式12-构建器 由来和动机原理思想构建器模式的C代码实现构建器模式中的各个组件详解1. 产品类&#xff08;Product&#xff09;2. 构建类&#xff08;Builder&#xff09;3. 具体构建类&#xff08;ConcreteBuilder&#xff09;4. 指挥者类&#xff08;Director&#xff0…

kettle从入门到精通 第七十九课 ETL之kettle kettle读取数据库BLOB字段转换为文件

上一课我们讲解了如何将文件以二进制流的方式写入数据库&#xff0c;本节课我们一起学习下如何将二进制数据读取为文件。 1、将二进制流转换为文件这里主要用到了步骤【文本文件输出】。表输入步骤从表中读取blob字段&#xff0c;java代码定义二进制流转换为文件的全路径&#…

Apache Tomcat文件包含漏洞复现(详细教程)

1.漏洞原理 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;其安装后会默认开启ajp连接器&#xff0c;方便与其他web服务器通过ajp协议进行交互。属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和…

设计模式13-单件模式

设计模式13-单件模式 写在前面对象性能模式典型模式1. 单例模式&#xff08;Singleton Pattern&#xff09;2. 享元模式&#xff08;Flyweight Pattern&#xff09;3. 原型模式&#xff08;Prototype Pattern&#xff09;4. 对象池模式&#xff08;Object Pool Pattern&#xf…

【Django】在vscode中新建Django应用并新增路由

文章目录 打开一个终端输入新建app命令在app下的views.py内写一个视图app路由引入该视图项目路由引入app路由项目(settings.py)引入app&#xff08;AntappConfig配置类&#xff09;运行项目 打开一个终端 输入新建app命令 python manage.py startapp antapp在app下的views.py内…

源代码加密软件有什么用?源代码怎么防泄密

在软件开发领域&#xff0c;源代码被视为软件的生命线&#xff0c;它包含了实现特定功能的算法、业务逻辑以及技术细节&#xff0c;是软件公司的核心竞争力所在。由于源代码的重要性&#xff0c;其安全防护变得尤为关键。一旦源代码泄露&#xff0c;企业不仅面临财务损失&#…

DevExpress WinForms自动表单布局,创建高度可定制用户体验(二)

使用DevExpress WinForms的表单布局组件可以创建高度可定制的应用程序用户体验&#xff0c;从自动安排UI控件到按比例调整大小&#xff0c;DevExpress布局和数据布局控件都可以让您消除与基于像素表单设计相关的麻烦。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&a…

【JavaEE初阶】线程的概念及创建

目录 &#x1f4d5; 前言 &#x1f4d5; 认识线程&#xff08;Thread&#xff09; &#x1f6a9; 概念 &#x1f60a;线程是什么 &#x1f642; 为啥要有线程 &#x1f62d; 进程和线程的区别&#xff08;面试题重点&#xff09; &#x1f92d; Java的线程和操作系统线程…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(八)-无人机探测与避让(DAA)机制

目录 引言 5.6 探测与避让&#xff08;DAA&#xff09;机制 5.6.1 基于PC5的探测与避让&#xff08;DAA&#xff09;机制 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Airc…

华为AR6300S路由器开启SSH远程登录

登录华为路由器&#xff1a; 使用控制台线连接到路由器的控制台端口或者通过Telnet或Web界面远程登录到设备。进入系统视图&#xff1a; 输入system-view&#xff08;或者简写为sys&#xff09;命令进入系统视图模式&#xff0c;这是配置全局参数的地方。生成RSA密钥对&#x…

2024年7月27日(星期六)骑行小河边村

2024年7月27日 (星期六&#xff09;骑行小河边村&#xff0c;早8:30到9:00&#xff0c;大观公园门口集合&#xff0c;9:00准时出发【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:大观公园门口集合 &#xff0c;家住东&#xff0c;西&#xff0…

NodeRed测试modbus RTU或modbus TCP通讯

目录标题 STEP1 添加modbus节点STEP2 查看是否安装成功STEP3 modbusTCP读取写入设置读取设置写入设置 STEP4 读写测试 STEP1 添加modbus节点 节点管理——控制板——安装 找到node-red-contrib-modbus&#xff0c;点击安装 STEP2 查看是否安装成功 安装成功后&#xff0c;左…

30.【C语言】函数系列下

1.嵌套调用 *定义&#xff1a;函数之间的互相调用 *例&#xff1a; int function1(int a, int b) {function2(b);//嵌套函数的调用return a; } //注意&#xff1a;不能将function2定义在function1的里面&#xff0c;这不叫嵌套函数的调用 void function2(int c) {} #include…

linux系统安装python3和pip

一、安装python 1、安装依赖环境 yum install gcc -y yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel yum install zlib zlib-devel openssl -y yum install openssl…

学习记录day16—— 数据结构 双向链表 循环链表

双向链表 1、概念 1&#xff09;就是从任意一个节点既能存储其前驱节点&#xff0c;又能存储后继节点 2)结构体中增加一个指向前驱节点的指针 //定义数据类型 typedef int datatype;//定义节点类型 typedef struct Node {union {int len;datatype data;};struct Node *prio; …