如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html/css/js 如何实现overflow自动滚动动画
来源：互联网
2023-03-16 19:16:31 218
本经验介绍在html/css/js 的编程当中，如何实现当一个元素宽度超过父层级时，自动播放滚动动画。
工具/原料
- Firefox
方法/步骤
首先，用以演示的html页面结构如图，有几个column，每个column里有几行方格，每个方格里有文字。文字可能过长，超出单元格大小。
首先第一步，禁止文字折行显示，并隐藏超出部分。
对于文字元素使用white-space: nowrap样式。
对于文字的父元素使用overflow: hidden样式。效果如图。
接下来，我们要给宽度超出父元素的情况添加一些样式。
为此，使用js代码实现一个函数，获取所有这样的元素（如图是都含有state-text class的元素），并依次比较他们各自是否超过各自父节点宽度。如果超过，添加一个class用于增加样式。
然后，使用setInterval让这个函数每过一段时间执行一次，如图每3秒检查一下页面上所有class含有state-text的元素。
然后给运行时添加的那个class，编写对应的css样式。
添加一个animation，使用ease-in-out过渡方式，动画含有两个关键帧，用transform中的translateX来实现，如图。
此时已经可以看到动画效果了，但是向左移动100%的话整个单元就空了，因此移动距离应该减去一个父元素的宽度。
为了实现移动距离更加精确，且能适应运行时各种不同尺寸，我们给css样式添加一个变量 --bar-width，并用calc函数来使用它。
在js代码中，添加对应的更新css变量的逻辑。如图，获取父节点宽度，并在子节点上调用style.setProperty来设置css变量值。
最终实现了滚动效果如图所示。即使各个单元格宽度不同，即使宽度是运行时变化的，它们都能实现合理的滚动显示。
注意事项
- 如果遇到问题，可以在下面提出疑问。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 436 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)