css3文字打印效果

CSS3的出现，让我们在网页设计中多了许多有趣的效果，其中文字打印效果就是其中之一。

首先，我们需要定义一个容器用于显示文本，并为其设置相关的CSS属性：

.print-container {
    width: 50%;
    margin: 0 auto;
    font-family: 'Courier',monospace;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ccc;
    padding: 20px;
}

其中，容器的字体选用了等宽字体，使其更符合打印效果的体验。

接着，我们将文本内容存放在一个字符串中：

var text = "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce in tincidunt ipsum,\
facilisis vulputate nulla. Morbi sit amet nulla mi. Donec suscipit posuere nibh,vel ornare \
massa ultrices id. Etiam massa nisi,pulvinar hendrerit dignissim vulputate,Bibendum \
volutpat,felis purus pretium ipsum.";

然后，我们利用CSS3中的animation属性来创建一个类似打印的动画效果：

.print-animation {
    overflow: hidden;
    white-space: Nowrap;
    animation: typing 5s steps(60,end);
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

以上代码中，我们设置了文本容器的溢出隐藏并禁止折行，然后定义了一个名为“typing”的动画，其效果是由0%到100%逐渐增加宽度，即文字一个个的显示。

最后，在HTML中应用上述代码，即可实现CSS3文字打印效果：

<div class="print-container">
    <p class="print-animation">${text}</p>
</div>

运行后，我们可看到一个类似打字的效果，最终呈现出一个完整的文本。