CSS输入文本动画 - 打字动画效果的实现

相较于之前的css版本，我们利用css3可以实现很多炫酷的东西，比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做。

效果如下：

实现代码：

<div class="typing-slider">
  <p>Text slider with</p>
  <p>typing animation effect</p>
  <p>in pure CSS.</p>
</div>
<style>
	body {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #FFCC00;
	}
	@keyframes cursor {
		from,to {
			border-color: transparent;
		}
		50% {
			border-color: black;
		}
	}
	@keyframes typing {
		from {
			width: 100%;
		}
		90%,to {
			width: 0;
		}
	}
	@keyframes slide {
		33.33% {
			font-size: 3rem;
			letter-spacing: 3px;
		}
		to {
			font-size: 0;
			letter-spacing: 0;
		}
	}
	.typing-slider {
		font-family: Consolas, monospace;
		font-weight: bold;
		text-align: center;
		white-space: nowrap;
	}
	.typing-slider p {
		position: relative;
		display: inline;
		font-size: 0;
		text-transform: uppercase;
		letter-spacing: 0;
		animation: slide 15s step-start infinite;
	}
	.typing-slider p::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		border-left: 3px solid black;
		background-color: #FFCC00;
		animation: typing 5s infinite, cursor 1s infinite;
	}
	.typing-slider p:nth-child(1) {
		animation-delay: 0s;
	}
	.typing-slider p:nth-child(1)::after {
		animation-delay: 0s;
		animation-timing-function: steps(16), step-end;
	}
	.typing-slider p:nth-child(2) {
		animation-delay: 5s;
	}
	.typing-slider p:nth-child(2)::after {
		animation-delay: 5s;
		animation-timing-function: steps(23), step-end;
	}
	.typing-slider p:nth-child(3) {
		animation-delay: 10s;
	}
	.typing-slider p:nth-child(3)::after {
		animation-delay: 10s;
		animation-timing-function: steps(12), step-end;
	}
</style>

链接: https://www.fly63.com/article/detial/11495