实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入文字特效</title>
</head>
<style>
:root {
font-size: 20px;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 6rem;
margin: 0;
padding: 0;
font-family: monospace;
width: 3ch;
overflow: hidden;
animation: 2s typeing steps(8, jump-none) forwards;
}
@keyframes typeing {
from {
width: 1ch;
}
to {
width: 8ch;
}
}
</style>
<body>
<h1>cssStudy</h1>
</body>
</html>
ch一个长度单位
ch是一个长度单位,1ch代表一个字母或者数字0的长度。
steps()
step()函数式符号定义了一个step函数,该函数将输出值的定义域划分为等距的步。这种阶梯函数的子类有时也被称为阶梯函数。
他的值有:
jump-start 表示左连续函数,以便动画开始时发生第一步或跳转;
jump-end 表示一个右连续函数,以便在动画结束时发生最后一步或跳转;
jump-both 表示左右连续功能,包括在0%和100%标记处的停顿,有效地在动画迭代过程中添加了一步;
jump-none两端均无跳跃。而是同时保持0%和100%的标记,每个持续时间的1 / n
start 等于 jump-start
end 等于 jump-end
参考连接:
https://segmentfault.com/a/1190000007042048