文字与视频结合效果

效果展示

在这里插入图片描述

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;
}

添加如上代码后,我们点击切换主题后我们只是修改背景颜色,而视频的内容一直保持与文字相融合。

在这里插入图片描述

在这里插入图片描述

完整代码下载

完整代码下载

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT或将引发现代知识体系转变

作为当下大语言模型的典型代表&#xff0c;ChatGPT对人类学习方式和教育发展所产生的变革效应已然引起了广泛关注。技术的快速发展在某种程度上正在“倒逼”教育领域开启更深层次的变革。在此背景下&#xff0c;教育从业者势必要学会准确识变、科学应变、主动求变、以变应变&am…

小谈设计模式(28)—解释器模式

小谈设计模式&#xff08;28&#xff09;—解释器模式 专栏介绍专栏地址专栏介绍 解释器模式角色分析抽象表达式&#xff08;Abstract Expression&#xff09;终结符表达式&#xff08;Terminal Expression&#xff09;非终结符表达式&#xff08;Non-terminal Expression&…

【爬虫实战】用pyhon爬百度故事会专栏

一.爬虫需求 获取对应所有专栏数据&#xff1b;自动实现分页&#xff1b;多线程爬取&#xff1b;批量多账号爬取&#xff1b;保存到mysql、csv&#xff08;本案例以mysql为例&#xff09;&#xff1b;保存数据时已存在就更新&#xff0c;无数据就添加&#xff1b; 二.最终效果…

visual studio设置主题和背景颜色

visual studio2019默认的主题有4种&#xff0c;分别是浅白色、深黑色、蓝色、蓝(额外对比度)&#xff0c;背景颜色默认是纯白色RGB(255,255,255)。字体纯白色看久了&#xff0c;眼睛会感到酸痛、疲劳&#xff0c;建议改成浅白RGB(250,250,250)、豆沙绿RGB(85,123,105)、透明蓝白…

语言模型编码中/英文句子格式详解

文章目录 前言一、Bert的vocab.txt内容查看二、BERT模型转换方法(vocab.txt)三、vocab内容与模型转换对比四、中文编码总结 前言 最近一直在学习多模态大模型相关内容&#xff0c;特别是图像CV与语言LLM模型融合方法&#xff0c;如llama-1.5、blip、meta-transformer、glm等大…

Apache Ant的安装

介绍 Apache Ant是一个Java库和一个 命令行工具&#xff0c;可以用来构建Java应用。Ant提供了许多内置的任务&#xff08;tasks&#xff09;&#xff0c;可以编译、组装、测试、运行Java应用。Ant也可以构建非Java应用&#xff0c;例如C、C应用。 Ant非常灵活&#xff0c;没有…

VScode远程root权限调试

尝试诸多办法无法解决的情况下&#xff0c;允许远程登陆用户直接以root身份登录 编辑sshd_config文件 sudo vim /etc/ssh/sshd_config 激活配置 注释掉PermitRootLogin without-password&#xff0c;即#PermitRootLogin without-password 增加一行&#xff1a;PermitRootLo…

【重拾C语言】十二、C语言程序开发(自顶向下、逐步求精;结构化程序设计原则;程序风格)

目录 前言 12.1 求玉米单产——自顶向下、逐步求精 12.1.1 自顶向下、逐步求精 12.1.2 求玉米单产 12.2 结构化程序设计原则 12.2.1 顺序 12.2.2 选择 12.2.3 循环 12.2.4 模块化 12.3 程序风格 12.3.1 程序风格 12.3.2 行文格式、标识符 12.3.3 注释及其它 前言…

Idea使用技巧——导包优化,新版idea界面取消,界面字体放大缩小

导包优化 on the fly 翻译为立刻 第一个表示&#xff0c;如果导入的包没有冲突&#xff0c;会自动帮你导入。如果输入List 无需手动altenter 第二个表示&#xff0c;没有引用的包&#xff0c;会自动删除。这个对于代码整洁尤其适用。相当于ctrlalto的功能 新版idea的界面取消 …

人机交互中的信息数量与信息质量

在人机交互中&#xff0c;信息数量和信息质量是影响人机交互效果的两个重要因素。信息数量指的是系统向用户提供的信息总量&#xff0c;包括输入信息、反馈信息、展示信息、错误信息等&#xff0c;在合适的情况下越少越好&#xff1b;信息质量则是指信息的准确性、有效性、清晰…

使用图像处理跟踪瞳孔(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

华为李鹏:加速5G商业正循环,拥抱更繁荣的5.5G(5G-A)

2023年10月10日&#xff0c;在华为主办的第十四届全球移动宽带论坛上&#xff0c;华为高级副总裁、运营商BG总裁李鹏面向来自全球的运营商和产业伙伴&#xff0c;提出抓住网络需求和趋势的力量——“面向后天的业务&#xff0c;积极规划明天的网络&#xff0c;加速5G商业正循环…

面试题-React(十二):React中不可变数据的力量

一、不可变数据的概念 不可变数据意味着数据一旦创建&#xff0c;就不能被更改。在React中&#xff0c;每次对数据的修改都会返回一个新的数据副本&#xff0c;而不会改变原始数据。这种方式确保了数据的稳定性和一致性。 二、Props中的不可变数据 在React中&#xff0c;组件…

TensorFlow入门(十六、识别模糊手写图片)

TensorFlow在图像识别方面,提供了多个开源的训练数据集,比如CIFAR-10数据集、FASHION MNIST数据集、MNIST数据集。 CIFAR-10数据集有10个种类,由6万个32x32像素的彩色图像组成,每个类有6千个图像。6万个图像包含5万个训练图像和1万个测试图像。 FASHION MNIST数据集由衣服、鞋子…

超详细的顺序表(附源码)

文章目录 前言线性表顺序表顺序表的分类静态顺序表动态顺序表 动态顺序表的实现&#x1f6a9;结构&#x1f6a9;初始化&#x1f6a9;销毁&#x1f6a9;插入&#x1f6a9;删除&#x1f6a9;查找&#x1f4c3;源代码 前言 顺序表是线性表的一种&#xff0c;代码量对于前面的学习…

K邻近算法(KNN,K-nearest Neighbors Algorithm)

文章目录 前言应用场景欧几里得距离&#xff08;欧氏距离&#xff09;两类、单一属性&#xff08;1D&#xff09;两类、两种属性&#xff08;2D&#xff09;两类、两种以上属性&#xff08;>3D&#xff09; Examples in R再来一个补充一下什么是变量 什么是变量&#xff1f;…

node.js+NPM包管理器+Webpack打包工具+前端项目搭建

javascript运行环境&#xff08;无需依赖html文件&#xff09; BFF&#xff0c;服务于前端的后端 官网下载安装&#xff0c;node -v查看是否安装成功 ①、创建一个01.js文件 //引入http模块 const httprequire(http)//创建服务器 http.createServer(function(request,respo…

C# Onnx GFPGAN GPEN-BFR 人像修复

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms;namespace 图像修复 {public partial class Form1 : For…

传感器信息系统中的节能收集研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

SecureCRT 自动测试脚本的使用方法

脚本示例&#xff08;get_batteryifo_interval_2s.vbs&#xff09;&#xff1a; Sub Main Do While(1)crt.Screen.Send "pm_client batteryinfo" & chr(13)crt.Sleep 2000 Loop End Sub 1. 解压 SecureCRT 压缩包&#xff08;网上下载&#xff09;&#xff1b…