视频背景制作法

John • 2022-07-04 • HTML • 595 阅读

视频背景制作法

index.html

<!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>全屏视频背景</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header class="v-header container">
    <div class="fullscreen-video-wrap">
      <video src="./Typing_light_01_Videvo.mp4" autoplay="true" loop="true">
      </video>
    </div>
    <div class="header-overlay"></div>
    <div class="header-content text-md-center">
      <h1>Welcome Everyone</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet
        impedit explicabo? Debitis quasi ullam aperiam!</p>
      <a class="btn">Find Out More</a>
    </div>
  </header>

  <section class="section section-a">
    <div class="container">
      <h2>Section A</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
        maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae
        accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur ratione
        reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
    </div>
  </section>

  <section class="section section-b">
    <div class="container">
      <h2>Section B</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
        maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae
        accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur ratione
        reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
    </div>
  </section>
</body>

</html>

index.css

*{
  box-sizing: border-box;
}

body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:1rem;
  font-weight:normal;
  line-height:1.5;
  color:#333;
  overflow-x:hidden;
}

.v-header{
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
}

.container{
  max-width:960px;
  padding-left:1rem;
  padding-right:1rem;
  margin:auto;
  text-align:center;
}

.fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.fullscreen-video-wrap video{
  min-height:100%;
  min-width:100%;
}

.header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background:#225470;
  opacity:0.85;
}

.header-content{
  z-index:2;
}

.header-content h1{
  font-size:50px;
  margin-bottom:0;
}

.header-content p{
  font-size:1.5rem;
  display:block;
  padding-bottom:2rem;
}

.btn{
  background: #34b3a0;
  color:#fff;
  font-size:1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
}

.section{
  padding:20px 0;
}

.section-b{
  background:#333;
  color:#fff;
}

@media(max-width:960px){
  .container{
    padding-right:3rem;
    padding-left:3rem;
  }
}

 

查看效果

版权声明：
作者：John
链接：https://aifree.fun/archives/63
来源：扎多拉古星人的秘密世界
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
视频背景制作法
http://aifree.fun/wp-content/uploads/2022/07/最终效果.mp4 视频背景制作法 index.html <!DOCTYPE html> <html lang="en"> <head> ……
<<上一篇
下一篇>>
文章目录
关闭
目 录