css实现向上滚动动画 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f6f6f6;
      }

      .box {
        position: relative;
      }

      .r1,
      .r2,
      .r3 {
        display: flex;
        align-items: center;
        margin-top: 10px;
        /* 无限循环动画 */
        animation-iteration-count: infinite;
        /* 进入页面时停顿一秒才开始执行动画（更符合需求） */
        animation-delay: 1s;
      }

      .r1 {
        margin-top: 0;
        animation-name: r1Fn;
        animation-duration: 10s;
        position: relative;
      }

      .r2 {
        animation-name: r2Fn;
        animation-duration: 10s;
        position: relative;
      }

      .r3 {
        animation-name: r3Fn;
        animation-duration: 10s;
        position: relative;
      }

      .item {
        /* 高度 130 + marginTop: 10 = 140, 后续 如果元素高度修改，可从 百分比 100%往前根据规律修改 */
        width: 340px;
        height: 130px;
        background: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 130px;
      }

      .item:not(:first-child) {
        margin-left: 10px;
      }

      /*
      帧动画逻辑：
      一：
      0%起始状态、位置
      消失
      不变化
      在末行显示出来
      不变化
      上
      不变化
      不变化
      上
      100%不变化


      二：
      0%起始状态、位置
      不变化
      上
      不变化
      消失
      不变化
      在末行显示出来
      不变化
      上
      不变化

      三：
      0%起始状态、位置
      不变化
      上
      不变化
      不变化
      上
      不变化
      消失
      不变化
      在末行显示出来

      三行各自共9帧动画，每帧间隔：100 / 9 = 10%。
    */
      @keyframes r1Fn {
        0% {
          opacity: 1;
          top: 0px;
        }

        11.11% {
          opacity: 0;
          top: 0px;
        }

        22.22% {
          opacity: 0;
          top: 0px;
        }
        /* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
        22.23% {
          opacity: 0;
          top: 360px;
        }

        33.33% {
          opacity: 1;
          top: 280px;
        }

        44.44% {
          opacity: 1;
          top: 280px;
        }

        55.55% {
          opacity: 1;
          top: 140px;
        }

        66.66% {
          opacity: 1;
          top: 140px;
        }

        77.77% {
          opacity: 1;
          top: 140px;
        }

        88.88% {
          opacity: 1;
          top: 0px;
        }

        100% {
          opacity: 1;
          top: 0px;
        }
      }

      @keyframes r2Fn {
        0% {
          opacity: 1;
          top: 0px;
        }

        11.11% {
          opacity: 1;
          top: 0px;
        }

        22.22% {
          opacity: 1;
          top: -140px;
        }

        33.33% {
          opacity: 1;
          top: -140px;
        }

        44.44% {
          opacity: 0;
          top: -140px;
        }

        55.55% {
          opacity: 0;
          top: -140px;
        }

        55.56% {
          opacity: 0;
          /* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
          top: 220px;
        }

        66.66% {
          opacity: 1;
          top: 140px;
        }

        77.77% {
          opacity: 1;
          top: 140px;
        }

        88.88% {
          opacity: 1;
          top: 0px;
        }

        100% {
          opacity: 1;
          top: 0px;
        }
      }

      @keyframes r3Fn {
        0% {
          opacity: 1;
          top: 0px;
        }

        11.11% {
          opacity: 1;
          top: 0px;
        }

        22.22% {
          opacity: 1;
          top: -140px;
        }

        33.33% {
          opacity: 1;
          top: -140px;
        }

        44.44% {
          opacity: 1;
          top: -140px;
        }

        55.55% {
          opacity: 1;
          top: -280px;
        }

        66.66% {
          opacity: 1;
          top: -280px;
        }

        77.77% {
          opacity: 0;
          top: -280px;
        }

        88.88% {
          opacity: 0;
          top: -280px;
        }

        88.89% {
          opacity: 0;
          /* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
          top: 80px;
        }

        100% {
          opacity: 1;
          top: 0px;
        }
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="r1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
      <div class="r2">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
      </div>
      <div class="r3">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
      </div>
    </div>
  </body>
</html>

 

posted @ 2023-06-13 10:01  rachelch  阅读(407)  评论(0)    收藏  举报