1

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

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

但在这里我正在寻找一个简单的出路..

4

3 回答 3

9

无论您使用 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>"));

然后为 s 设置动画span。（注意我在这里假设有问题的元素只包含文本，而不是文本和子元素。如果你有子元素，它会更复杂。）

这是一个非常基本的示例：

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

});

现场复制| 来源

于 2012-05-12T10:19:51.983 回答
2

只有 CSS 是不可能的（直到有一个 nth-letter 规范被接受）。同时，您可以使用 lettering.js http://letteringjs.com/将每个字母包装在一个跨度中，然后独立地为每个字母设置动画。

于 2012-05-12T17:44:54.893 回答
0

TJ Crowder 描述的技术非常好，但它不适用于更复杂的情况。跨度中的空白消失了，这可能会导致一些问题。如果您将跨度的显示设置为 inline-block （您需要它来为某些属性设置动画），您最终会得到一个长字。所以这种技术非常适合简单的淡入/淡出动画，但对于更高级的情况，我会推荐https://github.com/jschr/textillate/blob/master/jquery.textillate.js这个 jQuery 插件。

附言

我修改了先生。Crowder 代码，因此它可以很好地处理空格：

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

我使用 TweenMax staggerFromTo() 方法对其进行了动画处理，对我来说效果很好。

这里有一些演示：http ://blog.bassta.bg/2013/05/text-animation-with-tweenmax/

于 2013-05-22T14:23:27.307 回答