【CSS】视频文字特效

效果展示

【CSS】视频文字特效_第1张图片

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

下载

李旭科书法

下载

你可能感兴趣的:(语言-HTML,css,前端,视频文字特效,html)