当前位置：首页 > news >正文

文字光影扫过动效

news 来源：原创 2025/7/28 1:14:35

列子1

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>光影扫过文字动效</title><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #222;margin: 0;font-family: 'Arial', sans-serif;}.text-container {position: relative;font-size: 5rem;font-weight: bold;color: #333;text-transform: uppercase;letter-spacing: 3px;}.text {position: relative;display: inline-block;}.light-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);background-size: 200% 100%;background-position: -100% 0;-webkit-background-clip: text;background-clip: text;color: transparent;animation: lightSweep 3s infinite ease-in-out;}@keyframes lightSweep {0% {background-position: -100% 0;}50% {background-position: 100% 0;}100% {background-position: -100% 0;}}</style>
</head>
<body>
<div class="text-container"><div class="text">光影扫过效果</div><div class="light-overlay">光影扫过效果</div>
</div>
</body>
</html>

例子2

<template><div class="wrapperStyle" :style="wrapperStyle" style="text-align:left;"><!-- <div>{{ item.textName }}</div> --><div class="text-container"><div class="text">{{ item.textName }}</div><div class="light-overlay">{{ item.textName }}</div></div></div>
</template><script setup>
const props = defineProps({item: {type: Object,default: {},},editOrPreview: {type: String,default: "edit",}
});
const { proxy } = getCurrentInstance();
const wrapperStyle = computed(() => {return proxy.componentStyle(props.item, props.editOrPreview);
});const radiantTextStyle       = computed(() => {return {radiantBackgroundColor:props.item.radiantBackgroundColor || 'transparent',}
});
</script><style lang="scss" scoped>
@import "@/views/lowCode/myMoveable/styles/custom-low-code.scss";.text-container {--radiant-background-color: v-bind(radiantTextStyle.radiantBackgroundColor);position: relative;// font-size: 5rem;// font-weight: bold;// color: #fff;// text-transform: uppercase;// letter-spacing: 3px;
}.text {position: relative;display: inline-block;
}.light-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, var(--radiant-background-color), transparent);background-size: 200% 100%;background-position: -100% 0;-webkit-background-clip: text;background-clip: text;color: transparent;animation: lightSweep 3s infinite ease-in-out;
}@keyframes lightSweep {0% {background-position: -100% 0;}50% {background-position: 100% 0;}100% {background-position: -100% 0;}
}
</style>

文字光影扫过动效

列子1 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>光影扫过文字动效</title><styl…...

编程日记 2025/7/28 1:14:35

SpringBoot配置RestTemplate并理解单例模式详解

在日常开发中，RestTemplate 是一个非常常用的工具，用来发起HTTP请求。今天我们通过一个小例子，不仅学习如何在SpringBoot中配置RestTemplate，还会深入理解单例模式在Spring中的实际应用。 1. 示例代码我们首先来看一个基础的配置…...

编程日记 2025/7/28 1:07:50

计算机网络应用层（5）-- P2P文件分发视频流和内容分发网

💓个人主页：mooridy 💓专栏地址：《计算机网络：自顶向下方法》大纲式阅读笔记_mooridy的博客-CSDN博客 💓本博客内容为《计算机网络：自顶向下方法》第二章应用层第五、六节知识梳理关注我&…...

编程日记 2025/7/24 5:40:27

C++ TCP通信原理与实现

C 中 TCP 通信的原理基于 TCP/IP 协议栈的实现，以下是核心原理和关键步骤的详细说明： 一、TCP 通信核心原理面向连接通信双方需通过三次握手建立可靠连接，确保通信通道稳定。通过四次挥手断开连接，保证数据完整性。可靠传…...

编程日记 2025/7/25 21:16:42

计算机网络-运输层(1)

计算机网络-运输层(1) 文章目录计算机网络-运输层(1)5.1 运输层概述5.2 运输层端口号、复用与分用端口号基本概念端口号特性端口号分类重要说明 5.3 UDP与TCP协议对比关键区别说明 5.1 运输层概述计算机网络体系结构中的物理层、数据链路层以及网络层共同解决了主机通过异构…...

编程日记 2025/7/12 19:33:12

学习spark-streaming收获

1.流处理的核心概念 •实时 vs微批处理：理解了 Spark Streaming 的微批处理（Micro-Batch）模型，将流数据切分为小批次（如1秒间隔）进行处理，与真正的流处理（如Flink）的区…...

编程日记 2025/7/15 5:18:51

蓝桥杯 14. 奇怪的数列

奇怪的数列原题目链接题目描述从 X 星截获一份电码，是一些数字，如下： 13 1113 3113 132113 1113122113 ⋯⋯YY 博士经彻夜研究，发现了规律： 第一行的数字随便是什么，以后每一行都是对上一行 “读出…...

编程日记 2025/7/27 17:15:33

前端高频面试题day2

如何在vue3中使用defineAsyncComponent实现异步组件加载在 Vue 3 中，使用 defineAsyncComponent 实现异步组件加载的步骤如下： 引入方法：从 Vue 中导入 defineAsyncComponent。定义异步组件：通过 defineAsyncComponent 包装一个…...

编程日记 2025/7/25 1:12:27

Linux系统之设置开机启动运行桌面环境

Linux 开机运行级别介绍与 Ubuntu 桌面环境配置指南一、Linux 开机运行级别（Runlevel）在传统的 Linux 系统（如 SysV init 初始化系统）中，运行级别定义了系统启动时加载的服务和资源。常见的运行级别如下：运行级别模式用途0Halt（停机模式）关闭系统1Single User Mode…...

编程日记 2025/7/24 4:30:39

Python PyAutoGUI库【GUI 自动化库】深度解析与实战指南

一、核心工作原理底层驱动机制： 通过操作系统原生API模拟输入使用ctypes库调用Windows API/Mac Cocoa/Xlib屏幕操作依赖Pillow库进行图像处理事件模拟流程： #mermaid-svg-1CGDRNzFNEffhvSa {font-family:"trebuchet ms",verdana,arial,sans…...

编程日记 2025/7/23 20:29:12

【MobaXterm】win10下载v25.1安装流程

【下载地址】官网： https://mobaxterm.mobatek.net/ 下载安装版，解压使用更快一些【v20.0中文安装包】夸克网盘：https://pan.quark.cn/s/2ad5b59e6d8e#/list/share 对应的指导教程： MobaXterm中文版安装使用教程-附安装包…...

编程日记 2025/7/25 5:02:54

2025.4.22 JavaScript 常用事件学习笔记

一、事件概述 JavaScript 事件是指在用户与网页交互或网页状态发生变化时所触发的操作。通过使用事件，可以为网页添加丰富的动态功能，实现用户与页面之间的互动，让网页不再只是静态的展示内容。二、常见鼠标事件 click 事件简介 &#xf…...

编程日记 2025/7/19 5:10:06

Android 13.0 MTK Camera2 设置默认拍照尺寸功能实现

Android 13.0 MTK Camera2 设置默认拍照尺寸功能实现文章目录需求：参考资料架构图了解Camera相关专栏零散知识了解部分相机源码参考，学习API使用，梳理流程，偏应用层Camera2 系统相关修改文件-修改方案修改文件：修改…...

编程日记 2025/7/26 21:36:57

Linux:基础IO 文件系统

Linux:基础IO && 文件系统一、系统IO（一）系统文件操作接口1、open2、write3、read （二）文件描述符1、概念2、标准输入、标准输出、标准错误 （三）dup系统调用（重定向原理） 二…...

编程日记 2025/7/22 19:57:02

近期有哪些断链危机？如何提升供应链风险管理能力？

全球供应链格局正经历深刻变革，其网络架构愈发复杂，涉及多国企业主体且涵盖多个节点与复杂环节，管理难度显著增大。从原材料采购到终端交付，运输、仓储、加工等任一环节均存在潜在风险，单一环节效率滞后易引发系统性连…...

编程日记 2025/7/24 6:49:23

知识科普|褪黑素的发展历程及应用研究进展

睡眠作为维持人体健康的重要生理机制，其节律性受到精密调控。在昼夜节律系统的调控下，人类普遍遵循周期性单次睡眠模式，这一过程涉及复杂的神经-体液调控网络。其中神经元活动、神经递质传导、激素分泌及遗传调控机制共同作用于睡眠觉醒系统&…...

编程日记 2025/7/24 1:20:14

企业如何构建一个全面的Web安全防护体系

企业如何构建一个全面的Web安全防护体系企业构建全面的Web安全防护体系需融合战略规划、技术防御、持续运营和风险治理四大维度，以下是基于行业最佳实践的系统化方案： 一、顶层设计：治理架构与安全战略战略规划与合规驱动制定网络安全愿…...

编程日记 2025/7/21 21:14:45

T8332FN凯钰LED驱动芯片多拓扑车规级AEC-Q100

T8332FN是一款支持多拓扑结构的恒流LED驱动控制芯片，适用于汽车照明及高功率LED应用，具备宽电压输入、高精度调光及多重保护功能。核心特性 - 输入与拓扑：支持5-60V宽电压输入，适配Boost、Buck、Buck-Boost、SEPIC四种拓扑结构&…...

编程日记 2025/7/24 10:41:07

Redis一些小记录

Redis一些小记录 SpringData Redis：RedisTemplate配置与数据操作操作String类型数据 String是Redis中最基本的数据类型，可以存储字符串、整数或浮点数。RedisTemplate提供了ValueOperations接口来操作String类型的数据，支持设置值、获取值、…...

编程日记 2025/7/27 9:26:29

Win10安装 P104-100 驱动

安装完之后总结一下, 之前做了不少功课, 在网上搜了很多教程, 视频的文字的, 但是很多已经比较陈旧了. 最后发现的这个 GitHub 项目 NVIDIA-patcher 是最有用的, 因为这是现在这些魔改驱动的来源. NVIDIA-patcher 仓库地址: https://github.com/dartraiden/NVIDIA-patcher 安…...

编程日记 2025/7/26 22:20:15

Android开机动画资源包制作（测试使用）

开机动画资源包需要采用仅存储的方式进行压缩，不能使用压缩软件直接压缩生成。如果是系统开发人员，可以在源码目录中，采用bootanim程序提供的制作方式进行，下面可供测试人员自行制作。制作流程 1）基于设备中已有开…...

编程日记 2025/7/23 3:57:28

PWN基础-利用格式化字符串漏洞泄露canary结合栈溢出getshell

测试源码： #include<stdio.h> void exploit() {system("/bin/sh"); } void func() {char str[0x20];read(0, str, 0x50);printf(str);read(0, str, 0x50); } int main() {func();return 0; } 编译，开启 canary 保护，关闭 p…...

编程日记 2025/7/27 6:36:15

Kafka HA集群配置搭建与SpringBoot使用示例总结

Kafka HA集群配置搭建与SpringBoot使用示例总结一、Kafka高可用(HA)集群搭建 1. 环境准备至少3台服务器（推荐奇数台，如3、5、7）已安装Java环境（JDK 1.8）下载Kafka二进制包（如kafka_2.13-3.2.1.tgz&…...

编程日记 2025/7/24 17:58:43

MSO-Player：基于vlc的Unity直播流播放器，支持主流RTSP、RTMP、HTTP等常见格式

MSO-Player 基于libVLC的Unity视频播放解决方案支持2D视频和360度全景视频播放的Unity插件 📑 目录 🎥 MSO-Player 📋 功能概述🚀 快速入门📚 关键组件📝 使用案例🔌 依赖项📋 注意…...

编程日记 2025/7/21 7:16:08

97A6-ASEMI无人机专用功率器件97A6

编辑：ll 97A6-ASEMI无人机专用功率器件97A6 型号：97A6 品牌：ASEMI 封装：SOT-23 批号：最新引脚数量：3 特性：双向可控硅工作温度：-40℃~150℃ ‌97A6双向可控硅&#xff1a…...

编程日记 2025/7/27 19:46:56

body Param Query 三个不同的入参分别是什么意思在前端要怎么传这三种不同的参数

在 NestJS 中，Body()、Param() 和 Query() 用于处理不同类型的请求参数。以下是它们的含义及前端传递方式： Body()：请求体参数 • 含义：用于获取请求体中的数据（如 POST/PUT 请求中提交的 JSON、表单数据等&#xff09…...

编程日记 2025/7/22 9:34:10

生成式人工智能认证（GAI认证）含金量怎么样？

当生成式人工智能（Generative AI）的浪潮以摧枯拉朽之势重塑职业版图时，一个尖锐的问题正悬在无数人的心头：在技术迭代比眨眼更快的时代，如何证明自己具备驾驭AI的核心能力？这场认知革命的背后，一张认证证书的价值早已超越了纸面——它既是个人能力的“信用背书”，也是…...

编程日记 2025/7/27 7:10:19

环境DNA宏条形码技术，鱼类检测引物如何选择？

环境DNA（eDNA）宏条形码技术在鱼类多样性调查研究中的优势明显，相比于传统调查方式，eDNA宏条形码技术灵敏度更高，能够更好地揭示鱼类的丰富度，并且具有高时效性。然而，在使用这个技术的过程中&am…...

编程日记 2025/7/25 15:21:52

Scala集合操作与WordCount案例实战总结

集合计算简单函数 1、说明 （1）求和 （2）求乘积 （3）最大值 （4）最小值 （5）排序 2、案例实操 object demo29{ def main(args: Array[String]): Unit { val…...

编程日记 2025/7/27 12:52:12

Spark-Streaming核心编程（四）总结

有状态转化操作 - UpdateStateByKey ‌功能描述‌ UpdateStateByKey原语用于在DStream中跨批次维护状态，例如流计算中的累加wordcount。它允许对一个状态变量进行访问和更新，适用于键值对形式的DStream。 ‌工作原理‌ 给定一个由(键，事…...

编程日记 2025/7/24 4:26:28

关系型数据库PostgreSQL for Mac 保姆级使用教程

第一部分：安装PostgreSQL 方法一：使用Postgres.app（最简单） 访问 Postgres.app官网下载最新版本，将 Postgres.app 移动到 “Applications” 文件夹。双击Postgres.app打开应用，点击"Initialize&q…...

编程日记 2025/7/23 21:13:19

新增 29 个专业，科技成为关键赛道！

近日，教育部正式发布《普通高等学校本科专业目录（2025年）》，新增 29 个本科专业，包括区域国别学、碳中和科学与工程、海洋科学与技术、健康与医疗保障、智能分子工程、医疗器械与装备工程、时空信息工程、国际邮轮管理…...

编程日记 2025/7/27 0:30:59

云计算市场的重新分类研究

云计算市场传统分类方式，比如按服务类型分为IaaS、PaaS、SaaS，或者按部署模式分为公有云、私有云、混合云。主要提供计算资源、存储和网络等基础设施。但随着AI大模型的出现，云计算市场可以分为计算云和智算云，智算云主要是AI模…...

编程日记 2025/7/27 6:21:40

大模型时代的具身智能：从虚拟到现实的智能体进化革命

一、具身智能：重新定义 AI 与物理世界的交互范式 （一）概念解析：从 "离身" 到 "具身" 的认知革命具身智能（Embodied AI）是融合大模型决策能力与物理实体执行能力的新型智能系统&…...

编程日记 2025/7/27 7:55:36

import { FormatUtil } from ./FormatUtil;/*** 正则工具类* author CSDN-鸿蒙布道师* since 2025/04/27*/ export class RegexUtil {/*** 英文字母、数字和下划线*/static readonly REG_GENERAL "^\\w$";/*** 数字*/static readonly REG_NUMBERS "^\\d$"…...

编程日记 2025/7/27 12:26:33

Flink维表深度解析

一、维表的概念与作用维表（Dimension Table） 是数据仓库中的核心概念，通常用于存储静态或缓慢变化的业务实体信息（如用户资料、商品信息、地理位置等）。在实时流处理场景中，维表的作用是为主数据流&#…...

编程日记 2025/7/22 10:39:19

基于ArcGIS的洪水灾害普查、风险评估及淹没制图技术研究

一、洪水普查技术规范解读 1.1 全国水旱灾害风险普查实施方案解读 1.2 洪水风险区划及防治区划编制技术要求解读 1.3 山丘区中小河流洪水淹没图编制技术要求解读二、ArcGIS介绍及数据管理 2.1 ArcGIS界面及数据加载 2.2 ArcGIS常见数据格式 2.3基于Geodatabase的洪水灾…...

编程日记 2025/7/27 10:58:43

初识数据结构——二叉树从基础概念到实践应用

数据结构专栏 ⬅(click) 初识二叉树：从基础概念到实践应用🌳 一、树型结构基础 1.1 树的基本概念树是一种非线性的数据结构，由n(n>0)个有限节点组成一个具有层次关系的集合。它看起来像一棵倒挂的树，根朝上而叶朝下。关键特…...

编程日记 2025/7/28 1:05:09

手搓传染病模型（SEIR）

先看模型在本模型中，人群有四种自然史状态：易感者(S)，暴露者(E)，感染者(I)以及康复者(R) 2.模型假设人群分布是同质均匀的，未考虑人群出生、死亡、迁入迁出对疾病传播的影响 3.康复者永久免疫：康复者永久免…...

编程日记 2025/7/24 8:08:00

企业数据赋能 | 应用模板分享：汽车销售仪表板

实时监控销售数据，比较车型、地区业绩~ 今天，小编向大家分享 Tableau 应用分析模板：由 Imran Shaikh 搭建的汽车销售仪表板。借助此仪表板，企业可以实时跟踪销售情况，了解市场趋势，并比较不同车型、地区和销…...

编程日记 2025/7/25 15:47:22

C++？动态内存管理！！！

一、引言之前我们一起讨论了类和对象的相关知识，接下来我们将继续完善我们的知识体系，为以后继续深入学习C知识添砖加瓦，在本期我们将一起学习C中关于动态内存管理的相关知识，在学习之前将要先回顾C语言中是如何进行动态内存管理…...

编程日记 2025/7/25 8:47:16

MCP协议：AI生态的统一标准

MCP（Model Context Protocol，模型上下文协议）是人工智能领域的革命性协议标准，被广泛类比为“AI世界的USB-C接口”。它通过统一模型、算力和数据的交互方式，解决了AI生态中的碎片化问题，重构了智能协作的技术范式。以下是其核心解析与技术哲学：一、MCP协议的核心定位与…...

编程日记 2025/7/22 21:19:11

在 UniApp 中实现 App 与 H5 页面的跳转及通信

在移动应用开发中，内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架，提供了灵活的方式实现 App 与 H5 的跳转和双向通信。本文将详细讲解实现方法，并提供可直接复用的代码示例。文章目录一、 App 内嵌 H5 页面（使…...

编程日记 2025/7/24 21:19:50

目标跟踪最新文章阅读列表

AAAI2025 TrackFormer: Multi-Object Tracking with Transformers 论文：https://arxiv.org/abs/2101.02702 代码：https://github.com/timmeinhardt/trackformer AAAI2025 SUTrack 单目标跟踪论文：https://pan.baidu.com/s/10cR4tQt3lSH5V2RNf7-3gg?pwd=pks2 代码：htt…...

编程日记 2025/7/23 1:26:44

Spark RDD行动算子与共享变量实战：从数据聚合到分布式通信

RDD行动算子： 行动算子就是会触发action的算子，触发action的含义就是真正的计算数据。 1、reduce import org.apache.spark.{SparkConf, SparkContext} object value11 { def main(args: Array[String]): Unit { // 创建 SparkConf 对象并设置应用…...

编程日记 2025/7/26 17:23:06

《2025全球机器学习技术大会：阿里云讲师张玉明深度剖析通义灵码AI程序员》

4 月 18 日 - 19 日，由 CSDN & Boolan 联合举办的 2025 全球机器学习技术大会（ML-Summit）于上海顺利举行。大会聚焦人工智能与机器学习前沿技术，汇聚了来自科技与人工智能领域的数位顶尖专家以及数千名开发者和研究者&#xf…...

编程日记 2025/7/25 22:37:54

python+adafruit_pca9685 测试舵机存储当前角度

测试代码如下： # -*- coding: UTF-8 -*- import time from board import SCL, SDA import busio from adafruit_pca9685 import PCA9685 from adafruit_motor import servo 测试控制1块驱动板或者多块 pip install Adafruit-PCA9685 --break-system-packages pip i…...

编程日记 2025/7/23 11:31:58

视觉/深度学习/机器学习相关面经总结（2）（持续更新）

目录 1、跨模态对齐的方案2、位置编码方式1. **正弦和余弦位置编码（Sinusoidal Positional Encoding）**2. **可学习的位置编码（Learnable Positional Encoding）**3. **相对位置编码（Relative Positional Encoding&…...

编程日记 2025/7/26 14:19:03

缓存并发更新的挑战

缓存并发更新的挑战 1. 引言：并发更新的挑战2. 并发场景下的常见“坑”最后写入胜出 (Last-Write-Wins)脏读 (Dirty Read)丢失更新 (Lost Update)不可重复读 (Non-repeatable Read)幻读 (Phantom Read)写偏斜 (Write Skew)缓存与数据库不一致分布式系统中的时序问题…...

编程日记 2025/7/26 18:45:16

LeetCode题解1297. 子串的最大出现次数

（好久没写题解了，忙着学ai去了） 先来看题目很显然，题目就是要我们在给定的字符串中找到一个满足要求的连续子串。首先，要求子串中不同字母的数目得小于等于maxLetters，我们可以用一个DifLettsers函数来…...

编程日记 2025/7/26 5:13:33

列子1

例子2

相关文章：