效果演示

  长文本轮回滚动播放，短文本静止不动：

效果演示

教程

  假设我们有如下结构的 HTML：

1
2
#outer
    p 测试文本|测试文本|测试文本|测试文本|测试文本|测试文本

  其中outer是外部容器，p是需要显示的文本。

  因为p需要依赖outer的大小，所以outer的大小不能使用auto，需要手动设定，现在我们写出下面的样式：

1
2
3
4
5
6
#outer
  // 这个尺寸可以是固定的数字，也可以是使用父级元素尺寸算出来的
  width 200px
  height 40px
  // 隐藏内部控件超出范围的部分
  overflow hidden

  现在最重要的部分就是如何设置p的样式了，首先我们需要一个动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes km-text-roll
  from
    margin 0
  to
    /*
      原理如下：
        1. 使用 margin 让控件的左边起始位置移动到 outer 的结束位置
        2. 使用 translateX 让控件的末尾对齐到 outer 的结束位置
      补充：
        让 p 使用 absolute 定位，然后使用 left 和 translateX 也可以实现相同的效果
        但是在实际测试中使用 absolute 时滚动动画容易出现卡顿，具体原因我也不知道，知道的小伙伴可以在评论区补充一下
     */
    margin-left 100%
    transform translateX(-100%)

  然后给p设置样式：

1
2
3
4
5
6
7
#outer p
  float left
  // 禁止换行
  white-space nowrap
  // 这里是使用 cubic-bezier 实现文本在两端进行短暂停留
  // 也可以使用 liner 然后在动画中添加几个节点来实现在两端短暂停留
  animation km-text-roll 4s cubic-bezier(.6, 0, .5, 1) alternate infinite

  现在就能够实现文本在容器（outer）中来回滚动了，但是小伙伴肯定发现了一个问题，当p的长度小于outer时依然会在其中滚动，这肯定不是我们希望的效果，那么如何实现p长度小于outer时不进行滚动呢？

  实际上仅通过 css （据我所知）不能实现该效果，当然我可不是标题党，我们可以另辟蹊径来解决这个问题。

  上面的样式我们不难看出来，当outer和p的宽度一样时p是不会滚动的，所以我们只需要将p的样式改为下面的样子，就能做到在文本短时不进行滚动：

1
2
3
4
5
#outer p
  float left
  white-space nowrap
  animation km-text-roll 4s cubic-bezier(.6, 0, .5, 1) alternate infinite
  min-width 100%

  当然，这么写之后就不能给p标签添加边框、背景之类的效果了，不然在显示短文本的时候效果会很奇怪。这个我还没有想到比较好的解决方案，如果有小伙伴有的话可以发在评论区分享一下。

  接下来如果想要实现p居中对齐的话就有坑了，千万不要将outer的display设置成flex，如果把outer设置为flex，当p设置min-width后p的长度就会被限制在outer的宽度。比如当outer宽度为 100px 时p的最大宽度就是 100px，这样子就完全没办法实现滚动了。

  当然如果你可以肯定不会出现p宽度小于outer的情况就可以把min-width去掉，然后放心大胆的用flex了。如果需要设置min-width，可以给p设置line-height来实现垂直居中。

创作不易，扫描下方打赏二维码支持一下吧ヾ(≧▽≦*)o