效果1：

https://cdn.anify.cn/Qexo/25/2/PixPin_2025-02-13_15-08-04_1739430757_7d9102115b0e4bcf86e132dba42072f0.webp_d41d8cd98f00b204e9800998ecf8427e.webp

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100vh;
      overflow: hidden;
    }

    body {
      width: 100vw;
      height: 100vh;
      perspective: 1px;
      transform-style: preserve-3d;
      overflow: hidden;
      overflow-y: auto;
    }

    .section1,
    .section2,
    .section3,
    .section4 {
      position: relative;
      width: 100%;
      min-height: 100vh;
      transform-style: preserve-3d;
    }

    .section2,
    .section3,
    .section4 {
      background-color: orange;
      background: url(./ssr-html/img/13.jpeg) top center no-repeat;
      background-size: cover;
    }

    .section3 {
      background: url(./ssr-html/img/1.jpg) top center no-repeat;
    }

    .active {
      background: none;
    }
    .active::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(./ssr-html/img/1.jpg) top center;
      background-size: cover;
      transform: translateZ(-1px) scale(2.2);
    }

    span {
      top: 30%;
      left: 50%;
      transform: scale(1, 1.1) translate(-50%, 10%);
      position: absolute;
      font-size: 15vw;
    }
  </style>
  <body>
    <div class="section1 active">
      <span>1</span>
    </div>
    <div class="section2">
      <span>2</span>
    </div>
  </body>
</html>

效果2：

https://cdn.anify.cn/Qexo/25/2/PixPin_2025-02-13_15-09-30_1739430878_f775a388d5bf4c57934a3e3b3b669f6c.webp_d41d8cd98f00b204e9800998ecf8427e.webp

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box > div {
      height: 100vh;
      line-height: 100vh;
      text-align: center;
      font-size: 50px;
    }
    .box .s {
      background-attachment: fixed;
      background-size: cover;
      background-position: center center;
    }
    .s1 {
      background-image: url(./ssr-html/img/1.jpg);
    }
    .s2 {
      background-image: url(./ssr-html/img/11.jpg);
    }
    .s3 {
      background-image: url(./ssr-html/img/12.jpeg);
    }
    .s4 {
      background-image: url(./ssr-html/img/13.jpeg);
    }
    .s5 {
      background-image: url(./ssr-html/img/21.jpeg);
    }
  </style>
  <body>
    <div class="box">
      <div class="s s1">1</div>
      <div class="s s2">2</div>
      <div class="s s3">3</div>
      <div class="s s4">4</div>
      <div class="s s5">5</div>
    </div>
  </body>
</html>