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

Is it possible, using css or Javascript to silde a word in a sentence? I've the below, for sliding text. When the second sentence is shown, the word 'Data' to be then replaced with Process, then Technology, then Formula. Until all the words are shown the next sentence should not be shown.

是否可以使用css或Javascript来句子中的单词?我在下面,为了滑动文字。当显示第二个句子时,然后将“数据”一词替换为“处理”,“技术”,“公式”。在显示所有单词之前,不应显示下一句。

Tried using setInterval, get the display text from the div using innerText and write conditions to remove/re-add class. But, innerText always giving all the text inside the div.

尝试使用setInterval,使用innerText从div获取显示文本,并写入条件以删除/重新添加类。但是,innerText总是在div中提供所有文本。

HTML:

    

        
Manage collaborative process
        
Three level security to protect your Data
    

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

1 个解决方案

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

  

    
Manage collaborative process
    
Three level security to protect your
      

        

          Data
          Process
          Technology
          Formula