【CSS】文字扫光 | 渐变光

码来

  • 可调整角度与颜色值来改变效果
<p class="gf-gx-color">我是帅哥</p>
<style>
 .gf-gx-color {
   background: -webkit-linear-gradient(135deg,
       red,
       red 25%,
       red 50%,
       #fff 55%,
       red 60%,
       red 80%,
       red 95%,
       red);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -o-background-clip: text;
   background-clip: text;
   -webkit-background-size: 200% 100%;
   -moz-background-size: 200% 100%;
   -o-background-size: 200% 100%;
   background-size: 200% 100%;
   -webkit-animation: gf-gx 4s infinite linear;
   -moz-animation: gf-gx 4s infinite linear;
   -o-animation: gf-gx 4s infinite linear;
   animation: gf-gx 4s infinite linear;
 }

 @keyframes gf-gx {
   0% {
     /* 移动背景位置 */
     background-position: 0 0;
   }

   100% {
     background-position: -400% 0;
   }
 }
</style>

效果图

一束白光扫到了
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

systemctl 命令设置开机自启动失败

1.案例现象 我在 3 月 31日的时候发表了一篇《shell 脚本之一键部署安装 Nginx 》&#xff0c;介绍了如何通过 shell 脚本一键安装 Nginx 我脚本中执行了 Nginx 开机自启动的命令&#xff0c;当我使用 systemctl status nginx 命令复核的时候&#xff0c;我发现 Nginx 服务设…

Vue.js中的两大指令:v-on和v-bind,实现页面动态渲染和事件响应

Vue.js中的两大指令&#xff1a;v-on和v-bind&#xff0c;实现页面动态渲染和事件响应 一、Vue指令&#xff08;一&#xff09;v-bind指令&#xff08;二&#xff09;v-on指令1. 基本使用&#xff08;1&#xff09;最基本的语法 2. Vue中获取事件对象(了解)3. v-on 事件修饰符4…

树莓派安装 VScode 与卸载 VScode

0. 实验准备 一个带有系统的树莓派&#xff08;有屏幕更好&#xff09; 一台联网的电脑&#xff0c;且可以使用 VNC 登录树莓派&#xff08;与屏幕二选一&#xff09; 一个可以与树莓派交互文件的软件、如&#xff1a;MobaXterm&#xff08;推荐&#xff09;、WinSCP 1. 获取…

AI制作口播视频,原来这么简单

&#x1f4a1;大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、读书和自媒体。 在前面的文章中&#xff0c;我们介绍了生成自己专属卡通形象照&#xff0c;这张照片不仅能作头像&#xff0c;还可以让照片说话&#xff0c;作为我们…

【面试题】前端面试 15 问高频题

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 数组去重 遍历旧数组&#xff0c;然后拿着旧数组元素去查询新数组&#xff0c;如果该元素…

Redis的主从复制、哨兵机制、集群

一、主从复制 1、定义 主&#xff1a;master以写为主当master数据变化的时候从&#xff1a;slave以读为主自动将新的数据异步同步到其他slave数据库 2、作用 读写分离、容灾恢复、数据备份、水平扩容支撑高并发。 3、使用方式——配从不配主 权限配置&#xff1a;master如…

Mysql数据库基础和增删改查操作(每一次「欢喜」都值得纪念)

文章目录 一、数据库基本概念数据表数据库数据库管理系统(DBMS)数据库系统 二、数据库类型和常用数据库1.关系型数据库2.非关系型数据库 三、数据库的数据类型四、SQL语句1.简介2.分类 五、SQL语句的使用1.数据库操作&#xff08;1&#xff09;创建数据库 2.数据库表操作&#…

云服务器上使用Docker Compose创建Redis三主三从集群

一、环境 云服务器Ubuntu20.4Dokcer 24.0.2 二、步骤 目录结构是这样&#xff1a; 绿色的目录是用来存储容器中的文件&#xff0c;不需要我们手动创建&#xff0c;将路径配置在配置文件中即可。黑色的目录和文件需要自己手动创建。 我们一共创建7个容器&#xff1a; redis…

【实现微信红包效果】前端CSS实现微信红包打开效果(附源码下载)

【写在前面】上次领了一分钱微信红包后就在想如何实现红包打开翻转效果&#xff0c;微信带来最大的一个里程碑就是红包功能的开发&#xff0c;以至于出现这个现象&#xff0c;一块钱掉地上都不一定有人捡&#xff0c;但是微信群里抢到1分钱还得说一声谢谢老板&#xff0c;更有甚…

JQuery全部详细笔记-下

JQuery全部详细笔记-下 jQuery 的 DOM 操作 查找节点, 修改属性 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 应用实例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UT…

《导航帖》-全系列软考A计划

专栏分享 点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 文章目录 &#x1f449;关于作者&#x1f449;前提&#x1f449;链接追踪&#x1f449…

【探索 Kubernetes|容器基础进阶篇 系列 4】理解现代云原生时代的引擎

文章目录 系列文章目录&#x1f479; 关于作者一、前言|回顾二、静态和动态视图三、爆火的容器编排工具 Kubernetes 的诞生四、Kubernetes 要解决的问题是什么&#xff1f;五、理解 Kubernetes 全局架构图Master&#xff08;控制节点&#xff09;Node&#xff08;计算节点&…

Unreal Engine 5.1 AI行为树基础入门

ai行为树理解起来其实是npc根据自身一些情况进行一些逻辑执行&#xff0c;而这些逻辑是我们使用ai行为树去实现的。 ai行为树需要一个寻路网格体边界体积&#xff0c;在ue引擎中&#xff0c;体积Actor分为多种&#xff0c;寻路网格体边界体积只是其中的一种。 关于其它的体积&a…

什么是M-LAG?为什么需要M-LAG?

M-LAG&#xff08;Multichassis Link Aggregation Group&#xff09;提供一种跨设备链路聚合的技术。M-LAG通过将两台接入交换机以同一个状态和用户侧设备或服务器进行跨设备的链路聚合&#xff0c;把链路的可靠性从单板级提升到设备级。同时&#xff0c;由于M-LAG设备可以单独…

基于SSM的养老机构信息管理系统设计与实现

摘 要 随着我国老年人逐渐增加&#xff0c;老人们的子女数量减少&#xff0c;工作时间过长无暇照顾父母&#xff0c;导致养老院和护工需求量大幅上涨。伴随我国生活水平提高的同时对老年人的护工人员的要求也越来越高。根据以上要求关于养老院有很多的信息需要进行管理&#…

项目笔记-瑞吉外卖(全)

文章目录 1.业务开发day011.软件开发整体介绍2.项目整体介绍:star:3.开发环境搭建4.登录功能:star:4.1代码实现 5.退出功能6.页面效果出现 day021.完善登录功能2.新增员工功能3.启用禁用员工信息:star:(自定义消息转换器使用)4.编辑员工信息 day031.公共字段自动填充2.新增分类…

创业很长时间以后

创业过很长时间以后…综合能力是有滴 创业和打工后的思维习惯 为了效率&#xff0c;一般情况是这样滴 趣讲大白话&#xff1a;区别还是有滴 【趣讲信息科技195期】 **************************** 创业还是很难滴 每年成立很多新公司 有很多公司关门 公司平均生存时间&#xff1…

【哈佛积极心理学笔记】第6讲 乐观主义

第6讲 乐观主义 How can we create consciously and subconsciously a positive environment, where we actually can take out the most moral, the most successful self to appreciate that self. Create a powerful positive situation to bring out the best in people.…

基于Github开源项目Next Chat4 —— 之原生Js前端特效给你的眼睛来一场视觉盛宴吧

前期回顾 打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果_彩色之外的博客-CSDN博客css Loading 实战教学https://blog.csdn.net/m0_57904695/article/details/131156011?spm1001.2014.3001.5501 &#x1f44d; 本文专栏&#xff1a;开发技巧 一键使用 GP…

OpenCV中的图像处理3.11(10) OpenCV中的图像变换

目录 3.11 OpenCV中的图像变换3.11.1 傅里叶变换目标理论Numpy中的傅里叶变换OpenCV中的傅立叶变换DFT的性能优化为什么Laplacian是一个高通滤波器&#xff1f;其他资源 翻译及二次校对&#xff1a;cvtutorials.com 编辑者&#xff1a;廿瓶鲸&#xff08;和鲸社区Siby团队成员&…