css3打字效果

时间：5年前阅读：8526

有些时候，希望一段文本中的字符逐个显现，模拟出一种打字的效果。这个效果在技术类网站中尤为流行，用等宽字体可以营造出一种终端命令行的感觉

核心思路就是让容器的宽度成为动画的主体把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式、一个字一个字地扩张到它应有的宽度

这个方法是局限的，它并不适用于多行文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@keyframes typing{0%{width:0;}}
@keyframes caret{50%{border-color:transparent;}}
#tt{
  width:9em;
  animation:typing 4s steps(9) infinite ,caret .5s steps(1) infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right:1px solid;
}
		</style>
	</head>
	<body>
		<div id="tt">期权记学习笔记</div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3打字效果

网友评论