关于css:纯-CSS-实现超长内容滚动播放

如果 UI 稿设计了一个单行定宽的款式，对于超过长度的内容，个别都会抉择暗藏并展现省略号

这也是实现起来最简略，最罕用的解决办法

然而在理论需要中，很有可能要求在不扭转布局的状况下，用单行展现超长的文案且不能省略信息

这时候就能够思考，用内容来回滚动来实现上述的成果

先看最终成果

文案来回在指定区域内程度滚动，并且在头尾处停留一段时间

同时咱们思考做成通用的 css，所以尽可能的少应用固定值

先结构一个根本款式

box 作为任意须要蕴含滚动组件 div 的 class，宽度、边框等个性化的 style 都应该在 box 上设置
scroll-wrap 作为滚动容器的通用 class

scroll-item 作为滚动内容的通用 class

// index.html

<!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>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="box">
      <div class="scroll-wrap">
          <div class="scroll-item">
              我是结尾，我是两头我是两头我是两头，我是结尾
          </div>
      </div>
  </div>
</body>

</html>

.box {
  max-width: 15em;
  border: 1px solid;
}

.scroll-wrap {
  overflow: hidden;
  white-space: nowrap;
}

如何实现来回滚动的成果呢？

其实只有实现内容的的两种状态，再加上 animation 让这两种状态来回切换。如果这两种状态的实现都应用的 雷同的属性，那么切换过程中天然就会加上动画成果

两种状态：

「我是结尾」靠左显示
「我是结尾」靠右显示

咱们从简略的局部开始实现，先写一个来回切换状态的 animation 动画

.scroll-item {animation: scroll linear 4s alternate infinite;}

@keyframes scroll {
    0% {background: red;}

    100% {background: yellow;}
}

简略解释一下以后 animation 的属性

animation-name：所应用的 @keyframes 的名称 scroll
animation-timing-function：动画的速度曲线，linear 示意匀速
animation-duration：规定实现动画所破费的工夫为 4s
animation-direction：是否应该轮流反向播放动画，alternate 示意在偶数次会反向播放
animation-iteration-count：定义动画的播放次数，infinite 示意有限次

animation 定义好了，而后开始实现最要害的局部，头尾靠边显示的两种状态

如果只是单纯的实现其实很简略，间接用 position: absolute，再别离设置 left，right 即可

.scroll-wrap {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 1.4em;

}

.scroll-item {
    animation: scroll linear 4s alternate infinite;
    position: absolute;
}

@keyframes scroll {
    0% {left: 0;}

    100% {right:0;}
}

然而因为 left、right 是不同的属性，所以状态扭转过程中并没有动画成果

所以接下来咱们的指标就是：如何用 left 实现 right: 0

思考 position: absolute 是如何实现居中的。就会比拟容易联想到，能够通过 transform 属性来实现咱们想要的成果

@keyframes scroll {
    0% {
        left: 0;
        transform: translateX(0);
    }

    100% {
        left: 100%;
        transform: translateX(-100%);
    }
}

再给 keyframes 加上两个动画节点，让文案呈现头尾的停留

@keyframes scroll {
    0% {
        left: 0;
        transform: translateX(0);
    }
  
    10% {
        left: 0;
        transform: translateX(0);
    }
  
      90% {
        left: 100%;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(-100%);
    }
}

看起来曾经比拟完满了？

回顾咱们最开始定下的指标

并且思考做成通用的 css，所以尽可能的少应用固定值

因为用了 position: absolute，导致须要额定给父元素指定高度。咱们现实的状态应该是

内容高度天然撑开
box 宽度大于内容时，不会产生滚动
box 宽度由内容撑开

应用咱们现成的计划，只有不呈现上述三种状况时能力失常展现

究其原因，宽高都无奈自适应的起因，次要是由 position: absolute 造成的。所以咱们思考换一个其余计划来实现两种状态。

不过再逐渐阐明一遍就过于繁琐了，这里间接列出最终代码。同时解释一些要害属性

// 个性化局部 ⬇️
.box {
    width: 15em;
    border: 1px solid;
}

// 通用代码局部 ⬇️
.scroll-wrap {
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
}

.scroll-item {
    animation: scroll linear 4s alternate infinite;
    float: left;
}

@keyframes scroll {
    0% {
        margin-left: 0;
        transform: translateX(0);
    }

    10% {
        margin-left: 0;
        transform: translateX(0);
    }

    90% {
        margin-left: 100%;
        transform: translateX(-100%);
    }

    100% {
        margin-left: 100%;
        transform: translateX(-100%);
    }
}

max-width: 100%：保障本身宽度不超过 box
display: inline-block：目标是让 scroll-wrap 宽度自适应，能够被子元素撑开
vertical-align: top：设置完下面的属性之后，inline 会带上 1.x 的行高导致高度过大。设置 top 能够打消
float: left：为了让后续的 margin-left，transform 合乎预期须要设置 float
margin-left：等效于上一个计划中的 left

成果合乎预期，想扭转布局时。只须要批改 box 即可（例如：「box 不设置宽度」的款式就是定义了 width: auto

至此，咱们胜利用纯 css 实现了超长内容的滚动播放~

关于css:纯-CSS-实现超长内容滚动播放

一、需要剖析

二、性能实现

1. 根底布局

2. 动效剖析

3. 头尾地位

三、代码优化