Question

我想我可能需要一些CSS或Jquery的帮助，无论哪种代码都是最有效的代码。基本上我想将一个句子的每个单词一个接一个地改为不同的颜色。所以说一句话有5个字。第一个单词变为红色然后变回黑色，然后第二个单词在第一个单词恢复为原始颜色后变为红色，然后在无限循环中打开并返回到第一个单词。我无法弄明白，所以任何帮助都会很棒。谢谢！

到目前为止，我有这个：

.element1 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}
.element2 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}
.element3 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}
.element4 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}
.element5 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}
.element6 {
  animation: pulse 1s infinite;
 animation-delay: 1s;
}

@keyframes pulse {
  0% {
    color: black;
  }
  100% {
    color: red;
  }
}

然后HTML我想用每个单词包装一个span标签。

Answer 1

虽然，问题不是很清楚，但根据我的理解，这是我尝试给你写首字母。

＆＃13;

var sentence = $('div#content').text();

var words = sentence.split(' ');

var spanWords = [];

$(words).each(function(i,word){ 
  if($.trim(word).length)
     {
       var span = $('<span>');
       span.text(word);
       spanWords.push(span)
       spanWords.push('&nbsp;')
     }
});

$('div#content').html(spanWords)

var start = function(element){
  if(element.next().length){
      setTimeout(function(){
      element.css({color: "#000"});
      start(element.next())
     },1000);
    }
  element.css({color: "#f00"});
}

start($('div#content span:eq(0)'))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='content'>
  Hello world. you are beautiful.
  </div>

＆＃13;

更快速地为句子的每个单词设置动画？

1 个答案: