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

【CSS】视频文字特效

news 2026/2/10 17:30:27

效果展示

在这里插入图片描述

index.html

<!DOCTYPE html>
<html><head><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="container"><video src="fire.mp4" autoplay muted loop></video><div class="txt">少莫千华</div></div></body>
</html>

index.css

.container{color: #000;font-size: 10em;font-weight: bold;font-family: '李旭科书法';
}
video{width: 100%;
}.txt{visibility: visible;position: absolute;inset: 0;background: #fff;display: flex;justify-content: center;align-items: center;mix-blend-mode: screen;
}
  • inset: 0;等同于 `top: 0; right: 0; bottom: 0; left: 0;
  • display: flex;弹性盒
  • position:absolute;绝对定位
  • justify-content:center;水平居中
  • align-items: center;垂直居中
  • mix-blend-mode: screen;混合模式-与上一层(视频层进行混合)

fire.mp4

下载

李旭科书法

下载

相关文章：

【CSS】视频文字特效

效果展示 index.html <!DOCTYPE html> <html><head><title> Document </title><link type"text/css" rel"styleSheet" href"index.css" /></head><body><div class"container"&g…...

编程日记 2023/8/5 9:21:11

linux-MySQL的数据目录

总结&#xff1a; window中的my.ini linux 中 /etc/my.cnfwindow中的D:\soft\mysql-5.7.35-winx64\data linux 中 /var/lib/mysql 1.查找与mysql有关的目录 find / -name mysql [rootVM-4-6-centos etc]# find / -name mysql /opt/mysql /etc/selinux/targeted/tmp/modul…...

编程日记 2023/8/5 9:20:10

AI绘图实战（十二）：让AI设计LOGO/图标/标识 | Stable Diffusion成为设计师生产力工具

S&#xff1a;AI能取代设计师么&#xff1f; I &#xff1a;至少在设计行业&#xff0c;目前AI扮演的主要角色还是超级工具&#xff0c;要顶替&#xff1f;除非甲方对设计效果无所畏惧~~ 预先学习&#xff1a; 安装及其问题解决参考&#xff1a;《Windows安装Stable Diffusion …...

编程日记 2023/8/5 9:19:09

机器视觉系统设计：基础知识

机器视觉系统的设计 机器视觉系统集成是将各种不同的组件和子系统组合在一起并使它们充当单个统一系统的过程。 视觉系统集成包括光源&#xff0c;镜头&#xff0c;相机&#xff0c;相机接口和图像处理软件等等。您可能想知道如何设计和实现一个完整&#xff0c;成功的机器视…...

编程日记 2023/8/5 9:18:05

C# Blazor 学习笔记(11):路由跳转和信息传值

文章目录 前言路由跳转测试用例路由传参/路由约束想法更新&#xff1a;2023年8月4日 前言 Blazor对路由跳转进行了封装。 ASP.NET Core Blazor 路由和导航 NavigationManager 类 本文的主要内容就是全局的跳转 路由跳转 路由跳转就要用到NavigationManager 类。 其实最常用…...

编程日记 2023/8/5 9:17:03

Centos 7 安装 Python 时 zlib not available 错误解决

Centos 7 安装 Python 时 zlib not available 错误解决 报错信息&#xff0c; zipimport.ZipImportError: cant decompress data; zlib not available解决方法&#xff0c; sudo yum install -y zlib zlib-devel完结&#xff01;...

编程日记 2023/8/5 9:16:02

python sqllite基本操作

以下是一些基本的SQLite3操作&#xff1a; 连接到数据库&#xff1a;使用sqlite3.connect()函数连接到数据库&#xff0c;返回一个Connection对象&#xff0c;我们就是通过这个对象与数据库进行交互。例如&#xff1a; import sqlite3 conn sqlite3.connect(example.db)创建…...

编程日记 2023/8/5 9:15:00

记录--基于css3写出的流光登录（注释超详细！）

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 完整效果 对基本的表单样式进行设置 这里设置了基本的表单样式&#xff0c;外层用了div进行包裹&#xff0c;重点是运用了两个i元素在后期通过css样式勾画出一条线没在聚焦文本框的时候线会过度成一个…...

编程日记 2023/8/5 9:13:59

【测试设计】性能测试工具选择：wrk？jmeter？locust？还是LR？

目录 前言 wrk 优点 缺点 jmeter 优点 缺点 locust 优点 缺点 总结 资料获取方法 前言 当你想做性能测试的时候&#xff0c;你会选择什么样的测试工具呢&#xff1f;是会选择wrk&#xff1f;jmeter&#xff1f;locust&#xff1f;还是loadrunner呢&#xff1f; 今…...

编程日记 2023/8/5 9:12:57

为什么升级JDK 11后堆外内存使用增长了？

文章首发地址 JDK 11堆外使用增长的原因 JDK 11堆外使用增长的原因可能有以下几个&#xff1a; G1垃圾回收器的默认设置更改&#xff1a; JDK 11中的G1垃圾回收器默认开启了堆外内存分配&#xff0c;以减少Full GC时的STW时间。因此&#xff0c;如果应用程序使用了G1垃圾回收…...

编程日记 2023/8/5 9:11:57

Vue自定义防重复点击指令（v-repeatClick）

&#xff01;&#xff01;&#xff01;Vue防抖节流方法&#xff1a;VUE使用节流和防抖_vue防抖节流_停留的章小鱼的博客-CSDN博客 新建js文件directive.js: // directive.js // 防重复点击(指令实现) //使用&#xff1a; 在需要的按钮中加 v-repeatClick 指令即可 <el-but…...

编程日记 2023/8/5 9:10:55

高频高速板行业现状及市场前景

覆铜板全称为覆铜箔层压板&#xff0c;是由增强材料浸以树脂胶液 , 覆以铜箔 , 经热压而成的一种板状材料。覆铜板是制作印制电路板的核心材料&#xff0c;担负着印制电路板导电、绝缘、支撑三大功能。高频高速电路板有介电常数小且稳定、介质损耗小、传输损耗小等特点。 高频…...

编程日记 2023/8/5 9:09:54

【练手】自定义注解+AOP

在SpringBoot中实现自定义注解&#xff1a;( 声明注解的作用级别以及保留域 ) Target({ElementType.METHOD,ElementType.PARAMETER}) //注解的作用级别 Retention(RetentionPolicy.RUNTIME) //注解的保留域 public interface Log {int value() default 99; }在…...

编程日记 2023/8/5 9:08:53

QComboBox添加样式后，编辑栏背景一直白色问题解决方法。

一、QComboBox样式 /* 未下拉时&#xff0c;QComboBox的样式 */ QComboBox {border: 1px solid gray; /* 边框 */border-radius: 3px; /* 圆角 */padding: 1px 18px 1px 3px; /* 字体填衬 */color: #000;font: normal normal 15px "Microsoft YaHei";backgrou…...

编程日记 2023/8/5 9:07:51

vue动态绑定多个class以及带上三元运算或其他条件

在Vue中&#xff0c;有多种方法可以动态添加样式。下面介绍几种常用的方法&#xff1a; 1. 使用动态绑定的方式&#xff1a; 可以使用:style指令将一个对象作为值传递给它&#xff0c;对象的属性名表示要设置的样式属性&#xff0c;属性值表示要设置的样式值。例如&#xff1…...

编程日记 2023/8/5 9:06:50

Rpc原理

dubbo原理 1、RPC原理 一次完整的RPC调用流程&#xff08;同步调用&#xff0c;异步另说&#xff09;如下&#xff1a; 1&#xff09;服务消费方&#xff08;client&#xff09;调用以本地调用方式调用服务&#xff1b; 2&#xff09;client stub接收到调用后负责将方法、参数…...

编程日记 2023/8/5 9:05:47

yapi容器化docker部署以及mongodb容器的持久化挂载异常问题

概述 通过docker形式部署yapi&#xff0c;需要准备一个mongodb&#xff0c;然后直接在一个空文件夹里写好Dockerfile&#xff0c;其中通过wget下载yapi的zip包。 基本按照这篇文章&#xff1a;https://www.modb.pro/db/149666 来处理即可 1. 准备mongodb 把mongodb的docker…...

编程日记 2023/8/5 9:04:46

MyBatis-XML映射文件

XML映射文件 规范 XML映射文件的名称与Mapper接口名称一致&#xff08;EmpMapper对应EmpMpper.xml&#xff09;&#xff0c;并且将XML映射文件和Mapper接口放置在相同包下&#xff08;同包同名&#xff09; ​​​ 在maven项目结构中所有的配置文件都在resources目录之下&…...

编程日记 2023/8/5 9:03:44

C++类和对象入门(下)

C类和对象入门 1. Static成员1.1 Static成员的概念2.2 Static成员的特性 2.友元2.1 友元函数2.2 友元函数的特性2.3 友元类 3. 内部类3.1 内部类的概念和特性 4. 匿名对象5. 再次理解类和对象 1. Static成员 1.1 Static成员的概念 声明为static的类成员称为类的静态成员&…...

编程日记 2023/8/5 9:02:43

安卓：实现复制粘贴功能

目录 一、介绍 &#xff08;一&#xff09;ClipboardManager介绍 1、ClipboardManager常用方法&#xff1a; 2、获取 ClipboardManager实例 &#xff08;二&#xff09;、ClipData介绍 1、创建ClipData对象&#xff1a; 2、获取ClipData的信息&#xff1a; 3、ClipData…...

编程日记 2023/8/5 9:01:42

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56