关于html:视频背景文字特效

35次阅读

共计 1115 个字符，预计需要花费 3 分钟才能阅读完成。

代码来自头条号 ’ 前端小智 ’, 侵权删

<!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">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    section{
      width: 100%;
      height: 100vh;
      position: absolute;
      overflow: hidden;
    }
    h2{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-transform: uppercase;
      text-align: center;
      font-size: 20vw;
      font-weight: 800;
      line-height: 0.85em;
      color: #fff;
      background-color: #000;
      mix-blend-mode: multiply;
    }
    span{
      font-size: 0.4em;
      line-height: 0.85em;
    }
    video{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <section>
    <video autoplay muted loop src="https://vd2.bdstatic.com/mda-mbcx89u69bqqfkcx/sc/cae_h264_clips/1613226363/mda-mbcx89u69bqqfkcx.mp4?auth_key=1619102707-0-0-2645fd52c7e75eccc27ad5df8658ad24&amp;bcevod_channel=searchbox_feed&amp;pd=1&amp;pt=3&amp;abtest=" style="position: absolute; top: 0px; left: 0px;"></video>
    <h2>video in text <span>background</span></h2>
  </section>
</body>
</html>

正文完