【CSS】视频文字特效

效果展示

index.html

<!DOCTYPE html>
<html>
  <head>
    <title> Document </title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <video src="fire.mp4" autoplay muted loop></video>
      <div class="txt">少莫千华</div>
    </div>
  </body>
</html>

index.css

.container{
  color: #000;
  font-size: 10em;
  font-weight: bold;
  font-family: '李旭科书法';
}
video{
  width: 100%;
}

.txt{
  visibility: visible;
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: screen;
}

• inset: 0;等同于 `top: 0; right: 0; bottom: 0; left: 0;
• display: flex;弹性盒
• position:absolute;绝对定位
• justify-content:center;水平居中
• align-items: center;垂直居中
• mix-blend-mode: screen;混合模式-与上一层(视频层进行混合)

fire.mp4

下载

李旭科书法

下载