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

【CSS】视频文字特效

news 2025/8/10 13:25:12

效果展示

在这里插入图片描述

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/7/17 12:52:44

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/8/5 7:03:32

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/8/4 7:05:57

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/8/6 3:57:55

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/8/8 16:57:13

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/8/5 0:56:09

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/7/8 7:13:34

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/6/21 2:22:29