如何用css实现打字效果

最新推荐文章于 2025-05-22 09:09:59 发布

Bigfishseasugar

最新推荐文章于 2025-05-22 09:09:59 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/weixin_42207975/article/details/105676265

本文介绍了一种使用CSS动画实现文字逐字显示的方法。通过设置animation-timing-function为steps，配合具体的字体大小和数量，可以精确控制文字的显示速度。代码示例展示了如何创建这种效果，包括关键帧动画、盒子宽度、溢出隐藏等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

实现思路：

1 用animation-timing-function: steps()属性，设置动画的速度曲线。steps的意思是，将动画分为几步展示。

2 先将盒子的宽度设为0，并设置右边框实现光标效果。

3 将最终动画的盒子宽度设置为 字体大小 x 字体数量 px，然后steps处填（字体数量）

4 最后给盒子设置overflow：hidden 即可实现每次出现一个字。

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes print {
            0% {}

            100% {
                width: 180px;
            }
        }

        div {
            width: 0;
            font-size: 30px;
            white-space: nowrap;
            overflow: hidden;
            border-right: 1px solid black;
            animation-name: print;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            animation-timing-function: steps(6);
    </style>
</head>

<body>
    <div>好好学习好吧</div>
</body>

</html>