当前位置 博文首页 > 文章内容

    CSS - 使用CSS 3D属性来完成页面视差滚动效果。

    作者: 栏目:未分类 时间:2020-08-23 11:00:38

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>视差滚动</title>
        <style>
          * {
            box-sizing: border-box;
          }
          html,
          body {
            margin: 0;
            padding: 0;
          }
          html{
              overflow: hidden;
          }
          body {
            height: 100vh;
    
            /* 开启3d */
            perspective: 100px;
            transform-style: preserve-3d;
            overflow-y: auto;
          }
          .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .list-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 45vh;
            overflow: hidden;
          }
          .list-item:hover .item-image::before {
            background-color: rgba(0, 0, 0, 0.2);
          }
          .item-image {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            transform: translateZ(-50px) scale(2.4);
          }
          .item-image::before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
          }
          .item-image img {
            display: block;
            width: 100%;
            height: 100%;
            /* object-fit 需要设定尺寸 */
            object-fit: cover;
          }
          .item-text {
            color: #fff;
            text-align: center;
            font-family: "Courier New", Courier, monospace;
          }
          .text-title {
            font-size: 2rem;
            font-weight: bolder;
            margin-bottom: 20px;
          }
          .text-desc {
            font-size: 1.2rem;
          }
        </style>
      </head>
      <body>
        <div class="main">
          <div class="list-item">
            <div class="item-image">
              <img src="./img/4.png" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="item-image">
              <img src="./img/2.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
    
          <div class="list-item">
            <div class="item-image">
              <img src="./img/3.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
    
          <div class="list-item">
            <div class="item-image">
              <img src="./img/5.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="item-image">
              <img src="./img/6.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="item-image">
              <img src="./img/1.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="text-title">CSS3D动画</div>
              <div class="text-desc">
                采用 animation + transition 组合完成各种动画加过渡效果
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

    出处: https://www.bilibili.com/video/BV1Yt4y127Ds?from=search&seid=1888009266108241519