每天一个css动效之文字输入效果
2019-03-18 本文已影响0人
前端小白加一枚
使用border-color实现文字输入效果
关键点在于 border-right 实现光标闪烁
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-color实现文字输入效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: antiquewhite;
color: #333333;
}
h1{
font: bold 200% Consolas, Monaco, monospace;
border-right: 1px solid #333;
width: 15em;
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(26, end),
cursor-blink 0.3s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes cursor-blink {
50% {
border-color: transparent;
}
}
</style>
</head>
<body>
<h1>border-color实现文字输入效果</h1>
</body>
</html>
