基本信息
源码名称：animation keyframes入门级示例:打字效果(带光标)
源码大小：0.61KB
文件格式：.html
开发语言：CSS
更新时间：2019-02-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
@keyframes typing {
	from { width: 0 }
}

/* 光标 */
@keyframes caret {
	50% { border-right-color: transparent; }
}

h1 {
	font: bold 200% Consolas, Monaco, monospace;
	width: 8.25em;
	/* width: 15ch; */
	white-space: nowrap;
	overflow: hidden;
  	border-right: .05em solid;
	animation: typing 8s steps(155),
	           caret 1s steps(1) infinite;
  
}
</style>
</head>
<body>
  <h1 class="pic">CSS is awesome!</div>
</body>
</html>