文字打字效果

最新推荐文章于 2022-04-26 10:54:20 发布

玲曦

最新推荐文章于 2022-04-26 10:54:20 发布

阅读量220

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42565994/article/details/102895240

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3文字输入打字效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="wrapper">
	<h1>Hello</h1>
</div>
<div style="text-align:center;">
</div>
</body>
</html>

css:

body {
  background: #1d1f20;
}
/* Basic styles */
h1 {
	position: relative;
	float: left;
	color: #d7b94c;
	font-family: 'Inconsolata', Consolas, monospace;
	font-size: 4em;
	margin:100px;
}
h1 span{
	position: absolute;
	top: 0;
	right: 0;
	background: #1d1f20;
	width: 100%;
	border-left: .1em solid transparent;
	-webkit-animation: typing 3s steps(16) forwards,
										 cursor 1s infinite;
	animation: typing 3s steps(16) forwards,
						 cursor 1s infinite;
}
/* Animation */
@-webkit-keyframes typing{
	from { width: 100%;}
	to { width: 0;}
}
@-webkit-keyframes cursor{
	50% { border-color: white;}
}
@keyframes typing{
	from{ width: 100%;}
	to{ width: 0;}
}
@keyframes cursor{
	50% { border-color: white;}
}