效果演示

  长文本轮回滚动播放,短文本静止不动:

效果演示

教程

  假设我们有如下结构的 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 (据我所知)不能实现该效果,当然我可不是标题党,我们可以另辟蹊径来解决这个问题。

  上面的样式我们不难看出来,当outerp的宽度一样时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居中对齐的话就有坑了,千万不要将outerdisplay设置成flex,如果把outer设置为flex,当p设置min-widthp的长度就会被限制在outer的宽度。比如当outer宽度为 100px 时p的最大宽度就是 100px,这样子就完全没办法实现滚动了。

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


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