css 实现视差滚动

最新推荐文章于 2024-06-30 08:30:00 发布

zyzs

最新推荐文章于 2024-06-30 08:30:00 发布

阅读量181

点赞数

分类专栏：随手记录文章标签： html css flex

本文链接：https://blog.csdn.net/lszyzs/article/details/106775067

版权

随手记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css 视差滚动</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  html {
    overflow: hidden;
  }

  body {
    width: 100vw;
    height: 100vh;
    /* 视差滚动 实现的两句效果所在 */
    perspective: 100px;
    transform-style: preserve-3d;
    overflow-y: auto;
  }

  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .list-item:hover .item-img::before {
    background-color: rgba(0, 0, 0, .2);
  }

  .list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45vh;
    overflow: hidden;
  }

  .item-img {
    position: absolute;
    /*100% 的快捷方式 w100p */
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translateZ(-50px) scale(2.4);
  }

  .item-img::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    transition: all .3s ease;
  }

  .item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .item-text {
    color: #fff;
    font-family: 'Courier New', courier, monospace;
    text-align: center;
  }

  .text-title {
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 20px;
  }

  .text-desc {
    font-size: 1.2rem;
  }
</style>

<body>
  <main class="main">
    <section class="list-item">
      <div class="item-img">
        <img src="./桌面01.jpg" alt="img-01">
      </div>
      <div class="item-text">
        <div class="text-title">「秒速五厘米」</div>
        <div class="text-desc">有些人注定要错过 在你无能为力的时候</div>
      </div>
    </section>
    <section class="list-item">
      <div class="item-img">
        <img src="./桌面03.jpg" alt="img-03">
      </div>
      <div class="item-text">
        <div class="text-title">「提督出发了」</div>
        <div class="text-desc">我承认 我是老色痞了</div>
      </div>
    </section>
    <section class="list-item">
      <div class="item-img">![在这里插入图片描述](https://img-blog.csdnimg.cn/20200616015012902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xzenl6cw==,size_16,color_FFFFFF,t_70#pic_center)
        <img src="./桌面02.jpg" alt="img-02">
      </div>
      <div class="item-text">
        <div class="text-title">「红衣妹子」</div>
        <div class="text-desc">豆蔻年华 最美好的年纪最无忧无虑的时光</div>
      </div>
    </section>
    <section class="list-item">
      <div class="item-img">
        <img src="./桌面04.jpg" alt="img-04">
      </div>
      <div class="item-text">
        <div class="text-title">「冰菓」</div>
        <div class="text-desc">好奇宝宝 我很好奇你能告诉我吗</div>
      </div>
    </section>
  </main>
</body>

</html>

在这里插入图片描述

zyzs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 实现视差滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 视差滚动</title></head><style> body { padding:
复制链接

扫一扫