【前端小点】css3动画实现打字机效果

小球学前端

已于 2022-06-20 17:06:30 修改

阅读量733

点赞数

分类专栏：前端小点 css3 文章标签： css3 前端动画

于 2022-06-20 16:51:21 首次发布

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/125375972

版权

前端小点同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

如何用css3实现打字动态效果？先看效果：

效果图

解析：分为两个动画 spanAnimation ，一个是游标闪烁 cursor，一个是字体显示，
实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 100px;
			}
			.stepDiv {
				width: 900px;
				padding: 20px;
				box-sizing: border-box;
				background-color: green;
				border-radius: 10px;
				position: relative;
			}

			.p {
				font-size: 50px;
				color: #fff;
			}

			span {
				display: block;
				width: 750px;
				background-color: green;
				height: 60px;
				position: absolute;
				top: 76px;
				border-left: 2px solid #fff;
				right: 128px;
				animation: spanAnimation 3s steps(15) forwards, cursor 1s infinite;
			}
			
			@keyframes cursor{
				0{
					border-left: 4px solid #008000;
				}
				85%{
					border-left: 4px solid green;
				}
				100%{
					border-left: 4px solid #008000;
				}
			}

			@keyframes spanAnimation {
				from {
					width: 750px;
				}

				to {
					width: 0%;
				}
			}
		</style>
	</head>
	<body>
		<div class="stepDiv">
			<p class="p">如果批评不自由，那么赞美无意义</p>
			<span></span>
		</div>
	</body>
</html>