如何在 HTML 中的句子中滑动一个单词答案

【问题标题】：How to slide a word in a sentence in HTML如何在 HTML 中的句子中滑动一个单词
【发布时间】：2017-07-24 07:56:31
【问题描述】：

有没有可能，使用css或Javascript来对句子中的一个词进行silde？我有以下内容，用于滑动文本。当显示第二句时，“数据”一词将被替换为过程，然后是技术，然后是公式。在显示所有单词之前，不应显示下一个句子。

尝试使用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：

.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;
}

【问题讨论】：

将单词 Data 包装到 <span> 元素中并为其设置动画而不是 <p>
你也可以发布你的javascript吗？
嘿 Matthias S。如果您在 codepen 或其他编码器网站上搜索“单词轮播”或“单词滑块”，您会找到很多解决方案。在那里你可以检查代码并进入它。

标签： javascript html css

【解决方案1】：

您可以通过 CSS 动画实现此目的：

.sliding-words-wrapper {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  /* set height to fit one item */
  height: 18.4px;
}

.sliding-words {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  top: 0;
  animation: slide-words 10s linear infinite;
}

@keyframes slide-words {
  from {
    top: 0;
  }
  to {
    /* (Word count - 1) * 100% */
    top: -300%;
  }
}

<div class="tag-slider">
  <div class="marquee down" id="marquee-down-text">
    <p>Manage collaborative process</p>
    <div>Three level security to protect your
      <div class="sliding-words-wrapper">
        <div class="sliding-words">
          <span>Data</span>
          <span>Process</span>
          <span>Technology</span>
          <span>Formula</span>
        </div>
      </div>
    </div>
  </div>
</div>

如果您需要在某个事件之后显示此动画（例如显示文本），您可以将其状态设置为暂停（通过 CSS 属性 animation-play-state: paused），然后在某个事件之后通过 JavaScript 设置为 animation-play-state: running。

【讨论】：