Html 为什么添加第三项会破坏此CSS关键帧滑块？
我已经掌握了这个密码。原来我有两个项目滚动。然后我想添加第三个。然而，当我添加第三项时，它将一切都抛在脑后。我相信我在关键帧计算中遗漏了一些东西。不确定 我错过了什么？我需要有三个项目，或四个，或五个，但始终有他们的中心，无论什么设备。它们完全以两个项目为中心，但如果我添加另一个项目，则不会 ticker-banner.hd-tickerloop{ 溢出：隐藏； 宽度：100% } .标题横幅.标题促销{ 背景色：2abad9； 颜色：fff； 填充：16px0； 文本对齐：居中； 字体大小：.875rem； 字母间距：.0375rem } ticker-banner.hd-tickerloop{ 溢出：隐藏； 宽度：100% } ticker-banner.hd-tickerloop2.hd循环容器{ 显示器：flex； 对齐项目：居中； 宽度：200%； -webkit动画：tickerloop2 20s无限； 动画：tickerloop2 15秒无限； 动画持续时间：15秒 } ticker-banner.hd-tickerloop2.hd循环容器：悬停，ticker-banner.hd-tickerloop2.hd循环容器：活动，ticker-banner.hd-tickerloop2.hd循环容器：焦点在{ -webkit动画播放状态：暂停； -moz动画播放状态：暂停； -o-动画播放状态：暂停； 动画播放状态：已暂停 } ticker-banner.hd-tickerloop2.股票项目{ 宽度：75%； } .股票代码项目{ 字体大小：12px； 线高：1.4em； 颜色：fff； 文本装饰：无 } ticker-banner.hd-tickerloop2.股票项目{ -moz框大小：边框框； 框大小：边框框； 填充：0.2米 } @关键帧tickerloop2{ 0%{变换：translateX0；伸缩方向：行；} 40%{变换：translateX0；伸缩方向：行；} 50%{变换：translateX-50%；弯曲方向：行；} 89.9999%{变换：translateX-50%；弯曲方向：行；} 90%{变换：translateX-50%；弯曲方向：行；} 95%{变换：translateX0；伸缩方向：行反转；} 99.9999%{变换：translateX-50%；弯曲方向：行反向；} 100%{变换：translateX0；伸缩方向：行；} } 你想存10%吗？单击此处订阅+保存 在所有美国订单上获得65美元或以上的免费配送 干净的美。因为女孩，你太漂亮了，不适合当演员™ 页面标题 ticker-banner.hd-tickerloop{ 溢出：隐藏； 宽度：100% } .标题横幅.标题促销{ 背景色：2abad9； 颜色：fff； 填充：16px0； 文本对齐：居中； 字体大小：.875rem； 字母间距：.0375rem } ticker-banner.hd-tickerloop{ 溢出：隐藏； 宽度：100% } ticker-banner.hd-tickerloop2.hd循环容器{ 显示器：flex； 对齐项目：居中； 宽度：300%； -webkit动画：tickerloop2 20s无限； 动画：tickerloop2 15秒无限； 动画持续时间：15秒 } ticker-banner.hd-tickerloop2.hd循环容器：悬停，ticker-banner.hd- tickerloop2.hd循环容器：活动，ticker-banner.hd-tickerloop2.hd- 环 容器：关注内部{ -webkit动画播放状态：暂停； -moz动画播放状态：暂停； -o-动画播放状态：暂停； 动画播放状态：已暂停 } ticker-banner.hd-tickerloop2{ 宽度：75%； 保证金权利：5%； } .股票代码项目{ 字体大小：12px； 线高：1.4em； 颜色：fff； 文本装饰：无 } .股票代码项目{ 宽度：100%； } ticker-banner.hd-tickerloop2.股票项目{ -moz框大小：边框框； 框大小：边框框； 填充：0.2米 } @关键帧tickerloop2{ 0%{变换：translateX5%；伸缩方向：行；} 40%{变换：translateX5%；弯曲方向：行；} 45%{变换：translateX-30%；弯曲方向：行；} 60%{变换：translateX-30%；弯曲方向：行；} 70%{变换：translateX-63%；弯曲方向：行；} 100%{变换：translateX-63%；弯曲方向：行；} } 你想存10%吗？单击此处订阅+保存 在所有美国订单上获得65美元或以上的免费配送 干净的美。因为女孩，你太漂亮了，不适合当演员™Html 为什么添加第三项会破坏此CSS关键帧滑块？,html,css,flexbox,css-animations,keyframe,Html,Css,Flexbox,Css Animations,Keyframe,我已经掌握了这个密码。原来我有两个项目滚动。然后我想添加第三个。然而，当我添加第三项时，它将一切都抛在脑后。我相信我在关键帧计算中遗漏了一些东西。不确定 我错过了什么？我需要有三个项目，或四个，或五个，但始终有他们的中心，无论什么设备。它们完全以两个项目为中心，但如果我添加另一个项目，则不会 ticker-banner.hd-tickerloop{ 溢出：隐藏； 宽度：100% } .标题横幅.标题促销{ 背景色：2abad9； 颜色：fff； 填充：16px0； 文本对齐：居中； 字体大小：
如果还需要动态数量的项目，则必须动态计算动画关键帧的正确步骤和值，因为使用0%和-50%的平移值看起来与使用两个项目直接相关。100/2=50，所以。。。将数学和逻辑应用于/x将是您的出发点。嘿，CBroe，谢谢。我昨天确实试过了，但没用。当我这么做的时候，我也将宽度为200%的线条增加到了300%，效果很好，但第三个项目不知从哪里冒出来，与其他两个项目争夺。谢谢Mangesh。那没用。我把数学改为33.33%，然后
工作，但第三项出来快现在或根本不来。我在每个项目的关键帧中丢失了一些内容。您好，请告诉我您预期的o/p，我将立即帮助您使用我的css更改所有css，因为我在我的系统上进行了测试，它对meHi Mangesh的工作很好。在我回答之前我做了。你的计算使文本无法居中。你的距离是八分之一英寸。我注意到你的文章中有75%的内容是不好的。它需要从屏幕的最右边进入，就像我现在拥有它一样。这必须保持反应灵敏。此外，如果你观察滑块的工作，你会注意到第一个项目撕裂回来，在所有的突然。滑块需要平滑地循环。重复一遍时，不要向后跳。有道理？谢谢。我想我有问题，只是用px的间隔来定义px的宽度