仿keep首页的效果--前端html，css

最新推荐文章于 2024-07-24 23:00:08 发布

祥锅~~

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量180

点赞数 3

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_66139866/article/details/140595315

版权

在keep的首页会有一个锻炼的视频播放，中间有“自律给我只有”的标语，让人看了热血沸腾。

那么这是怎么实现的呢？

直接看代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户页</title>
    <link rel="stylesheet" href="user.css">
</head>
<body>
    <div class="first">
        <video src="https://v1.keepcdn.com/infra-cms/2021/05/27/12/27/896681731657_.mp4" muted autoplay loop></video>
        <div class="first_one">
            <img src="https://staticweb.keepcdn.com/staticShow/images/newhome/pic_banner_logo-fa842e9c43.png" alt="">
        </div>
    </div>
</body>
</html>

css部分：

* {
  margin: 0;
  padding: 0;
}

.first {
  width: 100%;
}

.first video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; //保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉。
}

.first .first_one {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
}

.first .first_one img {
  width: 413px;
  display: block;
  margin: 0 auto;
}

此处最重要的就是object-fit: cover;看了keep官网的代码才认识了这个属性，哈哈，真是学到了