文字与视频结合效果
效果展示

CSS 知识点
- mix-blend-mode 属性的运用
实现整体页面布局
<section class="sec"><video autoplay muted loop><source src="./video.mp4" type="video/mp4" /></video><h2>Run</h2><!-- 用于切换背景颜色 --><div class="dot"></div>
</section>
实现视频内容与文字融合在一起
.sec h2 {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20vw;color: #fff;background: #000;user-select: none;font-weight: 800;text-transform: uppercase;text-align: center;mix-blend-mode: multiply;
}.sec.active h2 {color: #000;background: #fff;
}.sec video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}
实现上述效果后,我们进行点击切换主题后我们的切换效果是在如下两个效果之间切换。


为 h3 标签添加mix-blend-mode属性
在上述的代码基础上我们只要添加一个属性,就会变成另外一个效果。
.sec.active h2 {color: #000;background: #fff;mix-blend-mode: screen;
}
添加如上代码后,我们点击切换主题后我们只是修改背景颜色,而视频的内容一直保持与文字相融合。


完整代码下载
完整代码下载
相关文章:
文字与视频结合效果
效果展示 CSS 知识点 mix-blend-mode 属性的运用 实现整体页面布局 <section class"sec"><video autoplay muted loop><source src"./video.mp4" type"video/mp4" /></video><h2>Run</h2><!-- 用于切…...
大数据Doris(九):配置BE步骤
文章目录 配置BE步骤 一、配置be节点...
BuyVM 纽约 VPS 测评
description: 发布于 2023-07-05 BuyVM 纽约 VPS 测评 产品链接:https://my.frantech.ca/cart.php?gid38 G口不限流量,抗一般投诉,不抗版权投诉。 CPU很快,硬盘不错。 无大陆优化,但大陆连通性很不错,…...
H3C交换机的40G堆叠线 ,可以插在普通光口做堆叠吗?
环境: S6520X-24ST-SI交换机 H3C LSWM1QSTK2万兆40G堆叠线QSFP 问题描述: H3C交换机的40G堆叠线 ,可以插在普通光口做堆叠吗? 解答: 1.H3C交换机的40G堆叠线通常是用于连接堆叠模块或堆叠端口的。这些堆叠线通常使…...
【Java 进阶篇】JavaScript三元运算符详解
JavaScript是一门广泛用于前端和后端开发的编程语言,具备强大的表达式和运算符。本篇博客将重点介绍JavaScript中的三元运算符,解释其语法、用法和示例。如果您是JavaScript初学者,或者希望更深入了解这门语言的运算符,那么这篇博…...
MySQL数据库技术笔记(4)
关系型数据库需要使用设计范式: 第一范式:遵从原子性,属性不可再分,数据库表的每一列都是不可分割的基本数据项,同一列中不能有多个值。 例如:需要创建一张地址表,存储地址信息。将地址信息划…...
批量图片转文字识别OCR身份证件信息提取软件
现在的OCR软件很多,有在线的也有本地的,单识别文字功能还行,不过能批量识别的好像不多,网上搜了几个都不怎么好用。尤其是识别身份证件之类的软件,并且还能提取出识别到的信息,比如姓名 名族地址等等更少。…...
Mac/Wins Matlab如何查看APPs源码
查看Apps方法一样,点击HOME-preferences-MATLAB-Apps查看你的Apps安装路径。 你的Apps文件就安装在该目录下,直接进入这个目录就可以看到你自己写的APPs文件,...
Web应用-Thinkphp框架-开发指南
Thinkphp框架 二级导航分类,模板继承,内置标签Public 修改MVC模块化 ——访问机制传参加载模版模版引入 分离Runtime 缓存文件管理员添加数据验证及验证场景 控制器 validate 在sql执行(敏感操作)之前验证数据模板 分页数据表连接…...
LeetCode【300】最长递增子序列
题目: 思路: 通常来说,子序列不要求连续,而子数组或子字符串必须连续;对于子序列问题,第一种动态规划方法是,定义 dp 数组,其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个…...
JRebel在IDEA中实现热部署 (JRebel实用版)
JRebel简介: JRebel是与应用程序服务器集成的JVM Java代理,可使用现有的类加载器重新加载类。只有更改的类会重新编译并立即重新加载到正在运行的应用程序中,JRebel特别不依赖任何IDE或开发工具(除编译器外)。但是&…...
uniapp微信小程序之分包异步化之组件分包
一、组件分包异步化解决的问题 日渐增加的通用组件造成的主包空间不足; 提升小程序访问速度,降低白屏率; 二、开启组件分包异步化过程中遇到的问题 如何进行占位组件配置; 如何解决通过$refs访问异步组件报错; 如何判断所有异步组件都已加载完毕; 多分包组件之间互相调用…...
Nacos(替代Eureka)注册中心
Nacos初步学习 Nacos 是一个开源的服务注册和配置中心,它允许您注册、注销和发现服务实例,并提供了配置管理的功能。下面是Nacos的最基础用法: 1. 服务注册和发现: 首先,您需要将您的应用程序或服务注册到Nacos中。…...
FHRP首跳冗余的解析
首跳冗余的解析 个人简介 HSRP hot standby router protocol 热备份路由协议 思科设备上 HSRP VRRP 华为设备上 VRRP HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &a…...
垂直分表为什么能够加快查询效率?
前言 垂直分表是分库分表中分表操作上一个重要的实现方式,利用垂直分表可以提高数据的处理效率和查询速度,本节主要围绕 垂直分表为什么能够加快查询速度 展开说明,以mysql查询的底层流程为例。 垂直分表是将一张表按列分为多张表,…...
Linux网络基础知识全面总结
文章目录 linux网络基础知识1.1 IP地址和子网掩码1.2 网关和路由1.3 域名系统 (DNS)1.4 端口和协议 Linux网络配置2.1 ifconfig命令2.2 网络接口配置文件2.3 DHCP自动获取IP地址2.4 静态IP地址配置2.5 网络重启和应用配置3. 网络工具和命令3.1 ping命令3.2 traceroute和mtr命令…...
【arm实验2】按键中断事件控制实验
设置按键中断,按键1按下,LED亮,再次按下,灭 按键2按下,蜂鸣器叫,再次按下,停 按键3按下,风扇转,再次按下,停 主函数: linuxlinux:~/study/08-c$…...
【数据结构-栈 二】【单调栈】每日温度、接雨水
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【单调栈的应用】,使用【栈】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&am…...
基于Keil a51汇编 —— 控制语句
ALIGN ALIGN expression ALIGN 语句将位置计数器设置为下一个地址模 2^表达式。 这可用于确保下一条语句在 2^n 边界上对齐。例如,对齐缓存行中的代码或数据。如有必要,汇编程序会创建一个间隙。间隔字节的内容因各个部分而异: 在data中未定…...
单目标优化算法:火鹰优化算法(Fire Hawk Optimizer,FHO)求解23个函数--提供MATLAB代码
一、火鹰优化算法FHO 火鹰优化算法(Fire Hawk Optimizer,FHO)由Mahdi Azizi等人于2022年提出,该算法性能高效,思路新颖。 单目标优化:火鹰优化算法(Fire Hawk Optimizer,FHO&#…...
终极指南:如何用btcrecover找回你忘记的比特币钱包密码 [特殊字符]️
终极指南:如何用btcrecover找回你忘记的比特币钱包密码 🗝️ 【免费下载链接】btcrecover An open source Bitcoin wallet password and seed recovery tool designed for the case where you already know most of your password/seed, but need assist…...
VideoAgentTrek Screen Filter 大规模部署成本分析:GPU资源优化配置指南
VideoAgentTrek Screen Filter 大规模部署成本分析:GPU资源优化配置指南 最近和几个做视频内容审核的朋友聊天,大家聊得最多的不是技术有多牛,而是“这玩意儿跑起来到底要花多少钱”。确实,像VideoAgentTrek Screen Filter这类视…...
QT6.5串口编程第一步:用CMakeLists.txt引入SerialPort模块的避坑指南
QT6.5串口编程避坑指南:CMakeLists.txt配置全解析 当你满怀期待地在QT6.5项目中引入串口通信功能,却在编译时遭遇"找不到QtSerialPort"的红色错误提示,这种挫败感我深有体会。作为一位经历过无数次类似"战斗"的开发者&am…...
57:L构建紫队协同:蓝队的协同防御
作者: HOS(安全风信子) 日期: 2026-03-07 主要来源平台: GitHub 摘要: 传统的红队和蓝队分离模式存在沟通障碍,导致防御效率低下。L构建了一套紫队协同系统,通过AI驱动的团队协作、知识共享和防御优化&…...
解决EF Core中的GroupBy与Include的冲突问题
在使用Entity Framework Core(EF Core)进行数据库操作时,我们常常会遇到一些复杂的查询需求,尤其是在涉及到数据的分组与关联加载时。今天我们来探讨一下如何在EF Core中处理GroupBy与Include方法的冲突。 问题描述 假设我们有一个产品数据库,包含产品(Products)、供应…...
Blender 3MF插件技术解析与进阶指南:从格式原理到工业级应用
Blender 3MF插件技术解析与进阶指南:从格式原理到工业级应用 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat Blender 3MF插件是连接开源3D创作与工业级3D打印…...
线激光手眼标定里,欧拉角和四元数到底怎么选?一个案例讲清机器人姿态的‘坑’
线激光手眼标定中欧拉角与四元数的抉择:从理论误区到工程实践 在机器人视觉系统中,手眼标定是连接感知与执行的关键桥梁。当激光传感器安装在机械臂末端时,如何准确描述传感器坐标系与机器人坐标系之间的姿态关系,直接决定了后续视…...
5分钟解锁网盘直链下载:告别限速,拥抱满速自由
5分钟解锁网盘直链下载:告别限速,拥抱满速自由 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 还在为网盘下载速度而烦恼吗?你是否经历过下载一个几GB的文件…...
教你把歌曲原声调小的5个技巧!简单又好用 赶紧收藏
在日常生活中,调整歌曲原声调小是非常常见的音频处理需求。比如在剪辑视频时,可能需要降低背景音乐的音量以突出旁白;或者在制作播客时,需要平衡人声与背景音的比例;还有在手机上听音乐时,某些歌曲突然出现…...
三极管实战指南:从NPN到PNP,手把手教你识别与使用(附常见误区解析)
三极管实战指南:从NPN到PNP,手把手教你识别与使用(附常见误区解析) 在电子设计的世界里,三极管就像电路中的"水龙头",控制着电流的流动。无论是简单的LED驱动电路,还是复杂的音频放大…...
