可以分别为每个字母设置动画吗？

Question

有没有办法单独使用CSS动画单词中的每个字母？

我想可以使用javascript/jquery,将单词作为字母数组进行迭代.

但在这里,我正在寻找一个简单的方法..

Answer 1

无论您是使用CSS还是JavaScript,您(或某些库)都必须将每个字母放在自己的元素中,以便单独为它们设置动画.例如:

<p>Hi there</p>

......需要成为

<p><span>H</span><span>i</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span></p>

这让我觉得JavaScript解决方案可能更受欢迎,否则你的标记会有点......写起来很不愉快.

使用jQuery的JavaScript,很容易用一堆包含该文本的字符串替换元素的文本:

var target = $("#target");
target.html(target.text().replace(/./g, "<span>$&</span>"));

然后你动画spans.(注意我在这里假设有问题的元素只包含文本,而不包含文本和子元素.如果你有子元素,它会更复杂.)

这是一个非常基本的例子:

HTML:

<p id="target" style="margin-top: 20px">Hi there</p>

JavaScript的:

jQuery(function($) {

  var target = $("#target");
  target.html(target.text().replace(/./g, "<span>$&</span>"));

  setTimeout(runAnimation, 250);

  function runAnimation() {
    var index, spans;

    index = 0;
    spans = target.children();
    doOne();

    function doOne() {
      var span = $(spans[index]);
      if (!$.trim(span.text())) {
        // Skip blanks
        next();
        return;
      }

      // Do this one
      span.css({
        position: "relative",
      }).animate({
        top: "-20"
      }, "fast").animate({
        top: "0"
      }, "fast", function() {
        span.css("position", "");
        next();
      });
    }

    function next() {
      ++index;
      if (index < spans.length) {
        doOne();
      }
      else {
        setTimeout(runAnimation, 500);
      }
    }
  }

});

实时复制 | 资源