文字与视频结合效果

效果展示

文字与视频结合效果1.png

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

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

[图片上传失败...(image-1203c0-1711499783766)]

[图片上传失败...(image-ed35a-1711499783766)]

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

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

.sec.active h2 {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

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

文字与视频结合效果1.png 文字与视频结合效果3.png

完整代码下载

完整代码下载