文章/答案/技术大牛

发布

社区首页 >专栏 >『前端必修课』视频文字特效

『前端必修课』视频文字特效

原创

程序员 NEO

修改于 2024-11-27 01:15:13

8200

代码可运行

文章被收录于专栏：前端必修课前端必修课

运行总次数：0

代码可运行

推荐文章	简介	链接
深入解析Vue Router：路由配置的艺术与科学	这篇文章是Vue Router的全面指南，从基础安装到高级应用，内容覆盖广泛，讲解清晰，是Vue开发者必备的参考资料。	查看文章

一、前言

🐤本篇文章是『前端必修课』系列文章的第 1 篇，主要介绍视频文字特效

文字燃烧怎么做？这个东西呢，可能跟很多人想象的并不一样，有的人会想象呢我就做一个燃烧的背景，是吧？然后呢再把文字的颜色呢设置为透明颜色，不就完事了吗？

不是的你要做不出来的，为啥呢，因为这个背景呢，它是个视频，你怎么把一个视频当成背景呢？所以说这篇文章，就是讲解具体的做法，得使用混合，具体怎么做呢，这代码写起来还是比较简单的。

二、实现过程

首先自行搭建一个基本的结构项目，这里我不讲解，然后就是准备一个视频，视频你自行去找吧就，我是去网上找的一个火焰燃烧的视频如下图：

项目的基本结构如下：

1.mp4：本次的视频素材
index.html：项目的入口
index.css：项目的样式

首先要在 index.html 中准备好两个元素，分别是 video，div，一个是视频一个是文字，浏览器看一下效果：

上面是视频，下面呢是一个文字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>视频文字特效</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
    <video src="./1.mp4" autoplay muted loop></video>
    <div class="txt">NEO</div>
</div>
</body>
</html>

然后接下来就到 CSS 里面去看一下样式，我就是先简单的给文字设置了一下样式：

.container .txt {
    color: #000;
    font-size: 10em;
    font-weight: bold;
    font-family: "华文宋体";
}

在给文字部分设置为绝对定位，在设置 inset 0 就是四个方向全为 0，这样呢，文字就盖上去了：

.txt {
    position: absolute;
    inset: 0;
}

然后再让文字居中一下，display: flex; 横向居中，然后纵向居中：

.txt {
+   display: flex;
+   justify-content: center;
+   align-items: center;
}

这里虽然文字居中了，视觉效果还是不太好，所以我这里将视频进行横向铺满，更改 index.html：

<div style="width: 100%; height: 100vh; overflow: hidden;">
    <video
            src="./1.mp4"
            autoplay
            muted
            loop
            style="width: 100%; height: 100%; object-fit: cover;">
    </video>
</div>

在 video 标签上套了一个 div，设置了 width: 100% 和 height: 100%：让视频适应容器尺寸。object-fit: cover：保持视频比例填充容器，可能裁剪部分内容，但不会变形。

这个效果就好多了。

好，接下来看好了，只需要两句代码就可以实现文字燃烧，怎么来做呢？第一句代码，背景颜色为白色注意这个是设置文字的背景颜色为白色来看看效果：

.txt {
+   background: #fff;
}

运行到浏览器查看效果：

哎，视频没有了，好看好，第二行代码叫 mix-blend-mode，设置文字的混合模式为 screen，保存，看看效果就是本次的燃烧特效。

就是这么简单，而且不管那个背景的那个视频是啥，它都能够显现出背景的视频，那为什么会产生这样的效果呢？接下来就得要解释 mix-blend-mode: screen; 了。

三、mix-blend-mode

3.1 mix-blend-mode 是什么？

首先解释 mix-blend-mode，这个玩意叫做 混合，混合的本质是啥呢？其实就是一个函数，这个函数的作用呢就是传入两个颜色，然后经过这个函数的运算，得到一个新的颜色。

例如：f(颜色1，颜色2) return 新的颜色。

注意点：这个函数的运算，它是针对每一个像素点的

这就是为什么我要把它设置为撑满整个父元素，啥意思呢？就是说这个 txt 这个元素，它里面每一个像素点，都要经过 f(颜色1，颜色2) return 新的颜色 这个运算规则，来产生一个新的颜色。

像素点就是浏览器中的像素点，那么 f(颜色1，颜色2) return 新的颜色 中的颜色1是啥呢？颜色1就是txt元素里面的每一个像素点，比如说如下图的这个像素点：

它是什么颜色，是不是白色，好这是第一个颜色，颜色1，那么第二个颜色是啥呢，就是这个像素点背后的颜色，啥意思：

上图我圆圈框出来的位置这个像素点，背后是不是一个视频，视频对应的那个像素点的颜色，这就是两个颜色，它把这两个颜色通过一个运算，产生一个新的颜色，这个新的颜色就是这个像素点：

如上图我圆圈框选出来的这个像素点它最终产生的颜色。对于这个像素点是如此，对于所有的这个元素里面的所有像素点全部要通过这个运算来运算一遍。那有人会说，这个玩意会不会有效率问题？

你完全不用担心效率问题，效率非常高，好现在说明白了这个属性的含义，就是通过一个函数来进行运算，针对每一个像素点来运算一遍，得到新的像素点，那么到底怎么来运算呢？怎么来运算靠的就是 screen 这个属性值，它有不同的属性值，就决定了它的不同的运算方式。

3.2 screen 属性值

我目前用的属性值是 screen 它的运算方式是啥呢？

它是这样来进行运算的，它是 255 减去 255 减 A，然后乘以 255 减 B 然后除以一个 255：

255-(255-A)(255-B)/255

这里面的 A 和 B 是啥，A 就是颜色1，B 就是颜色2，那么颜色1里边是不是就 RGB 对不对，把 R 拿过来，把 B 的 R 拿过来，算出新的 R，然后把 A 的 G 拿过来，把 B 的 G 拿过来，算出新的 G，然后把 A 的 B 拿过来，把 B 的 B 拿过来，算出新的 B。

RGB 分开运算，懂这意思吧，好，那么这个运算有什么特点呢？想这个 screen 这种运算方式，它有这么一个特点如果说某一个颜色是白色的话，比方说颜色1是白色，你看这些像素点是不是全是白色，如下图：

这些是不是都是白色，白色的像素点有什么特点？白色是不是255，其中一个颜色是 255，那么 255-(255-A)(255-B)/255 255-A 算出来个是个啥，是不是 0，255-(255-A)(255-B)/255 255-A 算出来是 0 的话那么，(255-B)/255 这一坨算出来是不是全是 0，最终就是255，也就是说，颜色1或者是颜色2，只要有一个颜色是白色的话，算出来的结果一定是白色，就是白色跟任何颜色进行 screen 来进行运算的话，得到的结果一定是白色，这就解释了为什么浏览器中所看到的点是白色，以及呢为什么我要把它背景设置为白色，设置白色的原因。

我想让除了文字以外的点保持白色，然后如果说另外一种情况呢，某一个颜色是黑色呢？比方说 255-(255-A)(255-B)/255 中的 A 这个颜色是黑色，A 就是 0 对不对，那么状态是啥，255-(255-A)(255-B)/255 就可以演变到了 255-255(255-B)/255，-255、/255 可以约掉。约掉的话那么这个算出来是啥最终公式为：