先看效果

代码实现了一个水平滚动的效果。<p>元素作为文本容器，在<div>容器中通过CSS动画@keyframes规则定义了从右向左的平移动画效果，并且通过设置overflow: hidden;和white-space: nowrap;隐藏超出部分和防止文本换行，从而实现文本在<div>内水平滚动的效果。动画的持续时间为8秒，且无限循环。

code

 <div>
      <p>使用 CSS 动画关键帧实现一个简单的滚动的效果~~~~~~~~~~~</p>
 </div>
 
 
    <style>
      @keyframes scroll {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      div {
        width: 800px;
        height: 50px;
        display: flex;
        align-items: center;
        background-color: #515151;
        overflow: hidden;
        white-space: nowrap;
      }
      p {
        width: 100%;
        line-height: 50px;
        font-size: 20px;
        color: #fff;
        display: inline-block;
        animation: scroll 8s linear infinite;
      }
    </style>

解析

@keyframes scroll: 这是CSS动画的关键帧规则的定义。scroll是自定义的动画名称，在这里定义了动画的起始状态和结束状态。
100% 和 -100%: 这些表示动画的起始状态和结束状态。在这里，100%代表动画的初始状态，-100%代表动画的最终状态。
transform: translateX(100%); 和 transform: translateX(-100%);: 这些是CSS的转换属性，用于在X轴方向进行平移。translateX(100%)表示将元素沿X轴向右平移100%的距离（相当于自身宽度的100%），而translateX(-100%)表示将元素沿X轴向左平移100%的距离。
通过display: inline-block;属性将其转换为内联块级元素，使其水平排列。然后通过animation: scroll 8s linear infinite;属性应用了名为scroll的动画，持续时间为8秒，线性动画，无限循环。

简单的滚动效果—动画关键帧

先看效果

code

解析