【前端动效】HTML + CSS 实现打字机效果

1. 效果展示

2. 思路分析

2.1 难点

2.2 实现思路

3. 代码实现

3.1 html部分

3.2 css部分

3.3 完整代码

4. 总结

1. 效果展示

如图所示，这次带来的是一个有趣的“擦除”效果，也可以叫做打字机效果，其中一段文本从左到右逐渐从无到有的显示出来。

2. 思路分析

目标：使文本从不可见到逐渐显现，且有一定的过渡效果。

2.1 难点

难点1：使用线性渐变实现逐行显示的效果。

难点2：动画生效的前提条件是数字类的属性。而这里控制线性渐变需要定义的是一个变量，所以这里就需要将变量转化成属性。

2.2 实现思路

写下两段一模一样的文字，将第二段文字覆盖第一段文字，设置第二段文字的背景和整体背景一致，且文字透明，再设置第二段文字的线性渐变(从透明到黑色渐变)。这样第一段文字就会慢慢的显示出来，就实现了上图所示的打字机效果。

3. 代码实现

接下来我会一步一步解说每段关键代码的含义。

3.1 html部分

<div class="container">
        <div class="box">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>
                ullam illo nulla molestias! Nemo corporis ex <br>
                blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
            </p>
            <p class="eraser">
                <span class="text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>
                    ullam illo nulla molestias! Nemo corporis ex <br>
                    blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
                </span>
            </p>
        </div>
    </div>

这里有两段一模一样的段落，其实，真正显示的是第一段，而第二段的作用实际是用它的背景来覆盖第一段文字的内容，再通过背景渐变来浮现第一段文字的内容。

3.2 css部分

 body{
        background: black;
    }
    p{margin: 0;}
    .container{
        font-size: 20px;
        color: white;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';
    }
    .box{
        width: 500px;
        height: 500px;
        margin: 80px auto;
        position: relative;
        line-height: 2;
    }

body 设置整个背景为黑色，.container 里设置文字的大小和颜色，.box 设置居中样式，并设置相对定位，方便两段文字重叠。

 .eraser{
        position: absolute;
        inset: 0;
    }
.text{
        --p: 30%;
        color: transparent;
        background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));
        animation: erase 5s forwards linear;
    }

.eraser 设置绝定位，使两段文字重叠。 .text 里设置背景的线性渐变，并用变脸 --p 来代替渐变范围，通过控制 --p 的大小来实现文字逐步展现。

@property --p{
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
    }
@keyframes erase {
        0%{
            --p: 0%;
        }
        100%{
            --p: 100%;
        }
    }

上文已经说过，要想动画生效，前提条件是动画中变化的是一个数字类属性，而这里的 --p 却是一个变量，所以我们需要将变量通过 property 改为属性。

3.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>
                ullam illo nulla molestias! Nemo corporis ex <br>
                blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
            </p>
            <p class="eraser">
                <span class="text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>
                    ullam illo nulla molestias! Nemo corporis ex <br>
                    blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
                </span>
            </p>
        </div>
    </div>
</body>

<style>
    body{
        background: black;
    }
    p{margin: 0;}
    .container{
        font-size: 20px;
        color: white;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';
    }
    .box{
        width: 500px;
        height: 500px;
        margin: 80px auto;
        position: relative;
        line-height: 2;
    }
    .eraser{
        position: absolute;
        inset: 0;
    }

    @property --p{
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
    }
    .text{
        --p: 30%;
        color: transparent;
        background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));
        animation: erase 5s forwards linear;
    }

    @keyframes erase {
        0%{
            --p: 0%;
        }
        100%{
            --p: 100%;
        }
    }
</style>
</html>