CSS 中的自动滚动文本动画没有一直进行
Autoscrolling text animation in CSS not going all the way
我正在尝试在单行固定宽度容器中滚动一些单行标签。
到目前为止我尝试过的是：
- 创建一个具有固定尺寸的容器。
- 在里面放置一个可滚动的容器并附加动画。
- 放置标签。
动画部分有效，但滚动并没有完全达到配置的效果 (translateX(-100%))。
超出固定容器宽度的溢出部分（codepen中为绿色）将被忽略。
我尝试了各种显示和弹性字段组合，但注意到。
这是一个代码笔示例。
https://codepen.io/efthymiosks/pen/QWQGVGg
问题是 100% 是元素的大小，而不是内容。我的意思是因为内容溢出了元素，100%只是指容器的可见宽度。
您需要将 100% 更改为其他内容，例如 150%。不幸的是，这意味着您需要事先知道内容的宽度。我所知道的唯一其他方法是使用 JavaScript 来计算内容的宽度。
我正在尝试在单行固定宽度容器中滚动一些单行标签。
到目前为止我尝试过的是：
- 创建一个具有固定尺寸的容器。
- 在里面放置一个可滚动的容器并附加动画。
- 放置标签。
动画部分有效，但滚动并没有完全达到配置的效果 (translateX(-100%))。
超出固定容器宽度的溢出部分（codepen中为绿色）将被忽略。
我尝试了各种显示和弹性字段组合，但注意到。
这是一个代码笔示例。
https://codepen.io/efthymiosks/pen/QWQGVGg
问题是 100% 是元素的大小，而不是内容。我的意思是因为内容溢出了元素，100%只是指容器的可见宽度。
您需要将 100% 更改为其他内容，例如 150%。不幸的是，这意味着您需要事先知道内容的宽度。我所知道的唯一其他方法是使用 JavaScript 来计算内容的宽度。