【前端动效】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>复制

4. 总结

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

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

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

	<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{
	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;
	}
	.text{
	--p: 30%;
	color: transparent;
	background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));
	animation: erase 5s forwards linear;
	}

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

	<!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>

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

1. 效果展示

2. 思路分析

2.1 难点

2.2 实现思路

3. 代码实现

3.1 html部分

3.2 css部分

3.3 完整代码

4. 总结

微信扫一扫：分享