文字与视频结合效果

效果展示

CSS 知识点

• mix-blend-mode 属性的运用

实现整体页面布局

<section class="sec">
  <video autoplay muted loop>
    <source src="./video.mp4" type="video/mp4" />
  video>
  <h2>Runh2>
  
  <div class="dot">div>
section>
1
2
3
4
5
6
7
8

实现视频内容与文字融合在一起

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

实现上述效果后，我们进行点击切换主题后我们的切换效果是在如下两个效果之间切换。

为 h2 标签添加mix-blend-mode属性

在上述的代码基础上我们只要添加一个属性，就会变成另外一个效果。

.sec.active h2 {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}
1
2
3
4
5

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

完整代码下载

完整代码下载