Javascript 如何在HTML中滑动句子中的单词

是否可以使用css或Javascript在句子中插入一个单词？我有下面的幻灯片文本。当显示第二句时，“数据”一词将被替换为过程、技术、公式。在所有单词都显示出来之前，不应显示下一个句子

尝试使用

setInterval

，使用

innerText

从

div

获取显示文本 并写入删除/重新添加类的条件。但是，

innerText

总是给出div中的所有文本

HTML:

<div class="tag-slider">
    <div class="marquee down" id="marquee-down-text">
        <p>Manage collaborative process</p>
        <p>Three level security to protect your Data</p>
    </div>
</div>

---

您可以通过CSS动画实现这一点：

。滑动字包装器{
垂直对齐：顶部；
显示：内联块；
溢出：隐藏；
/*将高度设置为适合一个项目*/
身高：18.4px；
}
.滑词{
显示：内联flex；
弯曲方向：立柱；
位置：相对位置；
排名：0；
动画：幻灯片文字10s线性无限；
}
@关键帧滑动单词{
从{
排名：0；
}
到{
/*（字数-1）*100%*/
前-300%；
}
}

管理协作过程

三级安全保护您的
资料
过程
技术
公式

将单词

数据

包装到

元素中，并将其动画化，而不是

你也可以发布你的javascript吗？嘿，Matthias S.如果你在codepen或其他编码器网站上搜索“word carousel”或“word slider”，你会找到很多解决方案。在那里，您可以检查代码并进入其中。

.marquee.down p {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}

.marquee.down p:nth-child(1) {
    animation: down-one 10s ease infinite;
    -moz-animation: down-one 10s ease infinite;
    -webkit-animation: down-one 10s ease infinite;
}

.marquee.down p:nth-child(2) {
    animation: down-two 10s ease infinite;
    -moz-animation: down-two 10s ease infinite;
    -webkit-animation: down-two 10s ease infinite;
}