如何使用CSS动画效果实现无缝滚动

目标:让里面的文字 一直从下往上滚动

1. 定义动画 位移 transform:translateY(-400px)

2. 调用动画 让 ul 调用动画

3. 复制10个小 li 为了出现无缝滚动(一个li的高度是40px,复制10个li的高度刚好400px)

4. 给 box盒子设置 overflow:hidden

5. 鼠标经过 ul 时 让 动画停止

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    a:hover {
      color: #ff8400;
    }

    .box {
      overflow: hidden;
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 100px auto;
    }

    .box li {
      height: 40px;
      line-height: 40px;
    }

    .box ul {
      animation: move 10s linear infinite;
    }

    @keyframes move {
      100% {
        transform: translateY(-400px);
      }
    }

    .box ul:hover {
      animation-play-state: paused;
    }
  </style>
  

 <div class="box">
    <ul>
      <li><a href="#">红色血脉 文化传承 代表推荐 “守护山” 反腐败 抓手</a></li>
      <li><a href="#">新华社连发六文 深揭乌克兰乱局背后的美国“黑手”</a></li>
      <li><a href="#">一箱油150欧元，美西方对俄制裁砸了欧洲民生的脚</a></li>
      <li><a href="#">准备回家！听听神舟十三号航天员回家前唠点啥</a></li>
      <li><a href="#">五角大楼又缺钱：中俄研发武器打击美国卫星</a></li>
      <li><a href="#">美国炮制“国别人权报告”对多国指手画脚，中方回应</a></li>
      <li><a href="#">乌总统全球演讲中有多少策略和“心机”</a></li>
      <li><a href="#">吉林省各市州均实现疫情防控社会面清零目标</a></li>
      <li><a href="#">《方舱日记》：住在方舱是种什么体验</a></li>
      <li><a href="#">周口一名医护高温下采核酸晕倒 醒来第一句让人泪目</a></li>
      <!-- 复制 -->
      <li><a href="#">红色血脉 文化传承 代表推荐 “守护山” 反腐败 抓手</a></li>
      <li><a href="#">新华社连发六文 深揭乌克兰乱局背后的美国“黑手”</a></li>
      <li><a href="#">一箱油150欧元，美西方对俄制裁砸了欧洲民生的脚</a></li>
      <li><a href="#">准备回家！听听神舟十三号航天员回家前唠点啥</a></li>
      <li><a href="#">五角大楼又缺钱：中俄研发武器打击美国卫星</a></li>
      <li><a href="#">美国炮制“国别人权报告”对多国指手画脚，中方回应</a></li>
      <li><a href="#">乌总统全球演讲中有多少策略和“心机”</a></li>
      <li><a href="#">吉林省各市州均实现疫情防控社会面清零目标</a></li>
      <li><a href="#">《方舱日记》：住在方舱是种什么体验</a></li>
      <li><a href="#">周口一名医护高温下采核酸晕倒 醒来第一句让人泪目</a></li>
    </ul>
  </div>