【CSS】视频文字特效

news2024/12/23 4:25:16

效果展示

在这里插入图片描述

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

下载

李旭科书法

下载

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

偶数科技与白鲸开源完成兼容性认证

偶数科技与白鲸开源完成兼容性认证

近日&#xff0c;偶数科技自主研发的云原生分布式数据库 OushuDB v5.0 完成了与白鲸开源集成调度工具 WhaleStudio v2.0 的兼容性相互认证测试。 测试结果显示&#xff0c;双方产品相互良好兼容&#xff0c;稳定运行、安全&#xff0c;同时可以满足性能需求&#xff0c;为企业级…
阅读更多...
2023-08-01 python根据x轴、y轴坐标（数组）在坐标轴里画出曲线图，python 会调用鼎鼎大名的matlib，用来分析dac 数据

2023-08-01 python根据x轴、y轴坐标（数组）在坐标轴里画出曲线图，python 会调用鼎鼎大名的matlib，用来分析dac 数据

一、python 源码如下 import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt#x[0 ,1,2,3,5,6,10] #y[0,0,3,4,5,7,8]# { 0 , 1 , 0x0003 },// 0 # { 0XFFFF * 1 / 10 , 3006 , 0x0a6b },// 1 # { 0XFFFF * 2 / 10 , 599…
阅读更多...
由于找不到MSVCP140.dll是什么意思？需要如何解决？

由于找不到MSVCP140.dll是什么意思？需要如何解决？

MSVCP140.dll是一个重要的动态链接库文件&#xff0c;它是Microsoft Visual C Redistributable for Visual Studio 2015的一部分。在运行某些程序或游戏时&#xff0c;如果你的计算机上缺少了MSVCP140.dll文件&#xff0c;可能会遇到错误提示。在这篇文章中&#xff0c;我们将详…
阅读更多...
leetcode212. 单词搜索 II(java)

leetcode212. 单词搜索 II(java)

单词搜索 II 单词搜索 II题目描述解题 回溯算法代码演示 回溯算法 单词搜索 II leetcode212 题 难度 困难 leetcode212. 单词搜索 II 题目描述 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。…
阅读更多...
苍穹外卖day12(完结撒花)——工作台+Spring_Apche_POI+导出运营数据Excel报表

苍穹外卖day12(完结撒花)——工作台+Spring_Apche_POI+导出运营数据Excel报表

工作台——需求分析与设计 产品原型 接口设计 工作台——代码导入 将提供的代码导入对应的位置。 工作台——功能测试 Apache POI_介绍 应用场景 Apache POI_入门案例 导入坐标 <!-- poi --><dependency><groupId>org.apache.poi</groupId><ar…
阅读更多...
图解架构 | SaaS、PaaS、IaaS/aPaaS平台是什么？aPaaS与PaaS有什么区别？

图解架构 | SaaS、PaaS、IaaS/aPaaS平台是什么？aPaaS与PaaS有什么区别？

参考 图解架构 | SaaS、PaaS、IaaS:https://www.51cto.com/article/717315.html aPaaS平台是什么&#xff1f;aPaaS与PaaS有什么区别&#xff1f;&#xff1a;https://developer.aliyun.com/article/718714 aPaaS和PaaS的区别是什么&#xff1f; aPaaS和PaaS都可以完成软件的…
阅读更多...
06-向量的更多术语和表示法

06-向量的更多术语和表示法

向量 引入的概念&#xff1a;向量就是一组有序的数字, 我们在理解它的时候&#xff0c; 可以把它理解成是一个有效的线段&#xff0c;也可以把它理解成是空间中的一个点&#xff0c;那么与之相对应的一个数字&#xff0c;也就是我们在初等数学中学的一个一个数&#xff0c;我们…
阅读更多...
【文生图系列】Runaway Gen-2试用体验

【文生图系列】Runaway Gen-2试用体验

文章目录 风景示例动物示例人物动作示例 Runway旗下的视频生成产品Gen-1和Gen-2已彻底开放&#xff0c;任何人都可注册一个账号免费尝试。免费的时长是105s&#xff0c;每个视频生成4s。 看gen-2官网和各公众号放出来的示例&#xff0c;非常震撼&#xff0c;不禁感慨现在文生视…
阅读更多...
在ChinaJoy里，看见数字经济“供给创造需求”新范本

在ChinaJoy里，看见数字经济“供给创造需求”新范本

作者 | 曾响铃 文 | 响铃说 “太爽了&#xff0c;没想到在这看到了武汉eStarPro战队现场打王者。” “真没想到这个跑步机&#xff0c;我戴上VR眼镜1秒穿越到鼓浪屿&#xff0c;居然在海边跑步。” “那个《头号赛车》好玩&#xff0c;超远距离控制真实车模在真实赛道飙车&…
阅读更多...
[每日习题]动态规划——公共子串计算 通配符匹配——牛客习题

[每日习题]动态规划——公共子串计算 通配符匹配——牛客习题

hello,大家好&#xff0c;这里是bang___bang_&#xff0c;本篇记录2道牛客习题&#xff0c;公共子串计算&#xff08;中等&#xff09;&#xff0c;通配符匹配&#xff08;较难&#xff09;&#xff0c;如有需要&#xff0c;希望能有所帮助&#xff01; 目录 1️⃣公共子串计算…
阅读更多...
AI实战干货，用AI 5分钟做1本超清画质原创绘本

AI实战干货，用AI 5分钟做1本超清画质原创绘本

Hi~我是专注于AI技术教程和项目实战的赤辰。 上期给大家分享了用ChatGPT生产配音的方法教程&#xff0c;反馈还是很热烈的&#xff0c;今天给大家带来一个用ChatGPT 5分钟生产出高画质精品绘本的教程。目前就有朋友通过这个插件制作育儿绘本教材&#xff0c;然后在亚马逊和小红…
阅读更多...
UE4 网格体闪烁问题解决

UE4 网格体闪烁问题解决

情形1 模型摆放共面导致闪烁 解决&#xff1a;模型的表面重叠引起的闪烁&#xff0c;将模型间距隔开1-2cm&#xff0c;视觉效果基本看不出来&#xff0c;但是能够很好解决表面山数艘问题。 情形2 模型建模时相接部分共面导致闪烁 解决&#xff1a;模型建模时不同组件使用过不…
阅读更多...
用于紫外线消毒灯的LED驱动：数明深紫外消毒方案SLM201

用于紫外线消毒灯的LED驱动：数明深紫外消毒方案SLM201

用于紫外线消毒灯的LED驱动SLM201 应用于紫外线消毒灯的LED驱动。疫情过后让越来越多的人开始注重起个人健康&#xff0c;除了出门佩戴口罩外&#xff0c;对于居家消毒也越发重视起来。而居家消毒除了75%浓度酒精及各类消毒液外&#xff0c;利用紫外线灯给衣物表面、房间消毒也…
阅读更多...
计算球体上一点指向球心的姿态

计算球体上一点指向球心的姿态

背景&#xff1a;最近有个需求&#xff0c;需要用相机拍摄一个物品&#xff0c;初始状态下相机在该物体正上方&#xff0c;随后相机的坐标按一定规律变化&#xff0c;要求它的视野中心一直固定在该物体上。这个问题可以理解为&#xff1a;以物品建立一个坐标系&#xff0c;相机…
阅读更多...
C++ 类和对象篇(三) 空类和默认成员函数

C++ 类和对象篇(三) 空类和默认成员函数

目录 一、空类 二、6个默认成员函数 一、空类 1.是什么&#xff1f; 如果一个类中没有显示定义任何成员&#xff0c;简称为空类。 class A {};//一个空类 2.空类中的成员&#xff1f; 空类中真的什么都没有吗&#xff1f; 并不是&#xff0c;任何类在什么都不写时&#xff0c…
阅读更多...
quickping探查在线设备的缺陷

quickping探查在线设备的缺陷

在单位工作的一部分是网络维护&#xff0c;发现在单位淘汰win7后&#xff0c;大量win10&#xff0c;win11设备使用后&#xff0c;探查在线设备用的quickping越来越不靠谱&#xff0c;发现有时使用后探查后&#xff0c;没有使用的ip&#xff0c;配置后会出现ip冲突&#xff0c;决…
阅读更多...
[Pytorch]卷积运算conv2d

[Pytorch]卷积运算conv2d

文章目录 [Pytorch]卷积运算conv2d一.F.Conv2d二.nn.Conv2d三.nn.Conv2d的运算过程 [Pytorch]卷积运算conv2d 一.F.Conv2d torch.nn.functional.Conv2d()的详细参数&#xff1a; conv2d(input: Tensor, weight: Tensor, bias: Optional[Tensor]None, stride: Union[_int, _s…
阅读更多...
Apache RocketMQ 远程代码执行漏洞（CVE-2023-33246）

Apache RocketMQ 远程代码执行漏洞（CVE-2023-33246）

漏洞简介 RocketMQ 5.1.0及以下版本&#xff0c;在一定条件下&#xff0c;存在远程命令执行风险。RocketMQ的NameServer、Broker、Controller等多个组件外网泄露&#xff0c;缺乏权限验证&#xff0c;攻击者可以利用该漏洞利用更新配置功能以RocketMQ运行的系统用户身份执行命…
阅读更多...
BAPI_GOODSMVT_CREATE 更改凭证的创建人

BAPI_GOODSMVT_CREATE 更改凭证的创建人

凭证创建时(创建人)需要更改为其它人员 1. 复制BAPI_TE_XMKPF, 增加字段USNAM 2. SE18: BADI名称 - MB_BAPI_GOODSMVT_CREATE 创建badi实施 3. 增强代码编辑如下: method if_ex_mb_bapi_goodsmvt_create~extensionin_to_matdoc.data: lt_extension type standard table …
阅读更多...
力扣320. 列举单词的全部缩写

力扣320. 列举单词的全部缩写

单词的 广义缩写词 可以通过下述步骤构造&#xff1a;先取任意数量的 不重叠、不相邻 的子字符串&#xff0c;再用它们各自的长度进行替换。 例如&#xff0c;“abcde” 可以缩写为&#xff1a; “a3e”&#xff08;“bcd” 变为 “3” &#xff09; “1bcd1”&#xff08;“a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023