css中的vm和vh，页面滚动的卡片网页

css实现页面滚动的卡片网页
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --cardHeight: 40vw;
      --cardMargin: 4vw;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

    }

    ul,
    ol {
      list-style: none;
    }

    body {
      background-color: #3a1d2b;
      font-size: calc(1em + .5vw);
    }

    /* 头部制作 */
    .header {
      display: grid;
      justify-items: center;
      align-items: center;
      /* 在pc端 100wv 包含了垂直滚动条 */
      width: 80vw;
      margin: 0 auto;
      height: 100vh;
      background-color: #3a1d2b;
      color: #fff;
      text-align: center;
    }

    .header h1 {
      font-size: 4.5vw;
      margin-bottom: 1vw;
    }

    .header p {
      font-size: 2vw;
    }

    /* 主体部分 */
    .main {
      width: 80vw;
      margin: 0 auto;
      /* background-color: pink; */
    }

    /* 动画效果 */
    @keyframes scale {
      0% {
        transform: scaleX(1);
      }

      100% {
        transform: scaleX(0.8);
      }

    }

    .main li {
      overflow: hidden;
      position: sticky;
      top: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: var(--cardHeight);
      margin-bottom: var(--cardMargin);
      background-color: #fff;
      box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
      border-radius: 1em;
      animation: scale 1s ease-in-out forwards;
      /* 视图时间线 */
      animation-timeline: view();
    }

    .main li img {
      width: 100%;
    }

    .main .l {
      display: grid;
      justify-items: center;
      align-items: center;

    }

    .main .l>div {
      width: 80%;
    }

    .main .l h2 {
      font-weight: 300;
      font-size: 2.5em;
    }

    .main .l p {
      margin: 1em 0
    }

    .main .l a {
      text-decoration: none;
      color: #fff;
      background-color: rgb(188 87 36);
      padding: .5em;
      border-radius: .25em;
    }

    /* 文字部分 */
    .article {
      width: 50vw;
      margin: 0 auto;
      color: #fff;
    }
  </style>

</head>

<body>

  <!-- 头部制作 -->
  <header class="header">
    <div>
      <h1>泰山美景·卡片滚动</h1>
      <p>👇 滚动页面，查看卡片滚动效果。</p>
    </div>
  </header>
  <!-- 主体部分 -->
  <main class="main w">
    <ul>
      <li>
        <div class="l">
          <div>
            <h2>云海玉盘</h2>
            <p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
            <a href="#">了解更多</a>
          </div>
        </div>
        <figure>
          <img src="./img/card1.jpg" alt="">
        </figure>
      </li>
      <li>
        <div class="l">
          <div>
            <h2>泰山佛光</h2>
            <p>泰山佛光大多出现在6-8月中半晴半雾的天气，而且是太阳斜照之时</p>
            <a href="#">了解更多</a>
          </div>
        </div>
        <figure>
          <img src="./img/card2.jpg" alt="">
        </figure>
      </li>
      <li>
        <div class="l">
          <div>

            <h2>晚霞夕照</h2>
            <p>清泉泻万仞，落日御千峰</p>
            <p>谁持彩笔染长空，几处深黄几处红</p>
            <a href="#">了解更多</a>
          </div>
        </div>
        <figure>
          <img src="./img/card3.jpg" alt="">
        </figure>
      </li>
      <li>
        <div class="l">
          <div>

            <h2>泰山日出</h2>
            <p>泰山日出是壮观而动人心弦的，是岱顶奇观之一,也是"天下第一山"------泰山的重要标志</p>
            <a href="#">了解更多</a>
          </div>
        </div>
        <figure>
          <img src="./img/card4.jpg" alt="">
        </figure>
      </li>
    </ul>
  </main>
  <!-- 文字介绍部分 -->
  <article class="article">
    <p>泰山四大奇观泰山四大奇观是对山东省泰安市泰山景区内四种独特自然景观的统称，主要包含泰山日出、云海玉盘、晚霞夕照、黄河金带；另有一说以"泰山佛光"替代黄河金带，为世界文化与自然双遗产泰山的核心景观。 </p>
    <p>
      泰山日出发生于黎明时分岱顶，曙光渐变为金黄，红日喷薄而出；云海玉盘多见于夏秋雨后，云雾翻涌如海浪平铺；晚霞夕照于雨后天晴时呈现，金光穿云与层峦交辉；黄河金带为晴日黄昏远眺黄河的蜃景，形似金色飘带。泰山佛光为半晴半雾天气下衍射形成的彩色光环，多现于6-8月瞻鲁台至南天门区域。
    </p>

    <p>
      奇观形成与地形、气候密切相关，最佳观赏期为秋季或雨后，岱顶及西北瞭望点为观测核心区域 。历代文人以诗文记载其景，自然奇观与人文积淀相融 。
    </p>
    <h3>云海玉盘</h3>
    <p>
      泰山日出是壮观而动人心弦的，是岱顶奇观之一，也是"天下第一山"------泰山的重要标志，随着旭日发出的第一缕曙光撕破黎明前的黑暗，从而使东方天幕由漆黑而逐渐转为鱼肚白、红色，直至耀眼的金黄，喷射出万道霞光，最后，一轮火球跃出水面，腾空而起，整个过程像一个技艺高超的魔术师，在瞬息间变幻出千万种多姿多彩的画面，令人叹为观止。岱顶观日历来为游人所向往，也使许多文人墨客为之高歌。
    </p>
    <h3>晚霞夕照</h3>

    <p>
      当雨过天晴，天高气爽，夕阳西下的时候，若漫步泰山极顶，仰望西天：朵朵残云如峰似峦，一道道金光穿云破雾，直泻人间。在夕阳的映照下，云峰之上均镶嵌着一层金灿灿的亮边，闪烁着奇珍异宝般的光辉。"谁持彩笔染长空，几处深黄几处红。""清泉泻万仞，落日御千峰。"
    </p>
    <h3>泰山佛光</h3>

    <p>
      泰山佛光是岱顶奇观之一。每当云雾弥漫的清晨或傍晚，游人站在较高的山头上顺光而视，就可能看到缥缈的雾幕上，呈现出一个内蓝外红的彩色光环，将整个人影或头影映在里面，恰似佛像头上方五彩斑斓的光环，故得名"佛光"或"宝光"。泰山佛光是一种光的衍射现象，它的出现是有条件的。据记载，泰山佛光大多出现在6-8月中半晴半雾的天气，而且是太阳斜照之时。
    </p>
    <h3>云海玉盘</h3>

    <p>
      云海玉盘是岱顶的又一奇观。夏天，雨后初晴，大量水蒸气蒸发上升，加之夏季从海上吹来的暖温空气被高压气流控制在海拔1500米左右的高度时，如果无风，在岱顶就会看见白云平铺万里，犹如一个巨大的玉盘悬浮在天地之间。远处的群山全被云雾吞没，只有几座山头露出云端；近处游人踏云驾雾，仿佛来到了天外。微风吹来，云海浮波，诸峰时隐时现，像不可捉摸的仙岛，风大了，玉盘便化为巨龙，上下飞腾，倒海翻江。
    </p>

  </article>
</body>

</html>