【前端动效】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部分

        
            

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore 

                ullam illo nulla molestias! Nemo corporis ex 

                blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
            
            

                
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore 

                    ullam illo nulla molestias! Nemo corporis ex 

                    blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
                
            
        
    

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

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: '';
        initial-value: 0%;
        inherits: false;
    }
@keyframes erase {
        0%{
            --p: 0%;
        }
        100%{
            --p: 100%;
        }
    }

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

3.3 完整代码

    
    
    Document


    
        
            

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore 

                ullam illo nulla molestias! Nemo corporis ex 

                blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
            
            

                
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore 

                    ullam illo nulla molestias! Nemo corporis ex 

                    blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.
                
            
        
    


    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: '';
        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%;
        }
    }

4. 总结

以上就是打字机效果的实现过程，本文参考于 渡一老师的大师课教程。如果对你有所帮助的话，不妨点赞加收藏，后面还会带来更多有趣的前端动效，关注我，不迷路😀。

更多前端动效点击下方链接↓ ↓ ↓

前端动效_借来一夜星光的博客-CSDN博客