使用 CSS 实现逐字母文本外观动画

Question

我有一个带有文字的

<div>

。

Lorem ipsum dolor sat amet，consectetur adipisicing elit，
sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

我希望

<div>

中的文本一次一个字符地出现在页面上：

L

洛

洛尔

...依此类推，直到全文可见

可接受的替代方案：一次执行一个单词，以避免 HTML 实体出现问题以及由于软连字符而导致单词跳动。

如果用户点击

<div>

，它应该取消动画并立即显示全文。

总之，我想模仿日式冒险游戏中常见的动画。 （我认为这有时被称为打字机或电传打字机效果。）这是一个很好的例子：

http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418

显然，我可以使用 JavaScript 编写动画脚本 - 只需设置一个计时器并逐一附加字母（或单词）即可。

但是可以在现代浏览器中使用 CSS 来完成我需要的操作吗？ （当然，我至少需要用JS改变

onclick

中的元素类，但这没关系。）

更新：澄清字符与字母以及 HTML 实体的问题：

我的文本中充斥着 HTML：

Lo&shy;rem <i>ip&shy;sum</i>.

将文本逐个字符附加到

innerHTML

的幼稚方法是行不通的：

L

洛

洛&

...呸！

Answer 1

您可以使用一些 jQuery 来实现此目的。

看看我的小提琴：http://jsfiddle.net/kA8G8/7/

HTML

<p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

JS

var text = $('.typewriter').text();

var length = text.length;
var timeOut;
var character = 0;


(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        var type = text.substring(0, character);
        $('.typewriter').text(type);
        typeWriter();

        if (character == length) {
            clearTimeout(timeOut);
        }

    }, 150);
}());

Answer 2

不幸的是，你不能使用 CSS 来做到这一点，所以你必须恢复到纯 JS 方法。

正如您的评论所解释的，您需要文本包含一些 HTML 标记，因此我建议逐字动画是处理该问题的最简单方法。像这样的东西：

var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function () {
        Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});

这是一个工作示例

注意：此代码可能会被大量重构，以变得更加高效和简洁，但它应该完整地演示这个概念。

---

我还创建了一个逐字母的示例。虽然它不支持您的 html 标记需求，但它看起来确实更好，所以也许您可以调整它以适合您。

Answer 3

有一个纯 CSS 技巧可以做到这一点。

使用遮罩元素，甚至是 z-index 高于文本元素的伪元素

p:before

或

p:after

。为其指定与文本背景相同的颜色和行高。将其绝对位置放置在文本上方。

然后你只需对其进行动画处理，使其向右移动，一个字母一个字母地揭开。 这只是一种解决方法，因为如果文本下方有复杂的背景（例如图像），那么此技巧很难重现，因为您必须将背景图像映射到遮罩元素上。

Answer 4

我知道这不相关，但我喜欢这种动画，所以我创建了这个工具： https://imageecho.app/

享受！