我用 CSS 制作了一个打字动画。我对这封信未完全显示有疑问。 尝试将“m”制作为一个字母,并且动画感觉更自然。它需要看起来像有人正在打字。 需要帮助来分别为“镜像”中的每个字母设置动画,并使其看起来像是有人正在打字,因此每个键的出现时间略有延迟。
https://codepen.io/shahil/pen/ZEGwMxQ
@font-face {
font-family: danub;
src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf);
}
@-webkit-keyframes typing {
from {
width: 0;
}
to {
width: 16.3em;
}
}
@-moz-keyframes typing {
from {
width: 0;
}
to {
width: 16.3em;
}
}
@-webkit-keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: black;
}
}
@-moz-keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: black;
}
}
body {
font-family: Consolas, monospace;
}
h1 {
font-size: 3rem;
width: 16.3em;
white-space: nowrap;
overflow: hidden;
color: #000;
border-right: 0.1em solid black;
font-family: danub;
-webkit-animation: typing 17s steps(30, end),
/* # of steps = # of characters */ blink-caret 1s step-end infinite;
}
<h1>remirror</h1>
最佳答案
如果单词不会改变,您可以尝试为伪元素的内容属性设置动画。
@font-face {
font-family: danub;
src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf);
}
/* For the caret */
h1:before {
content: '';
}
/* For the word */
h1:after {
content: '';
font-family: danub;
border-right: 0.1em solid black;
animation: typing 3s steps(8) forwards, blink-caret 1s step-end infinite;
}
@keyframes typing {
0% {
content: ''
}
12.5% {
content: 'r'
}
25% {
content: 're'
}
37.5% {
content: 'rem'
}
50% {
content: 'remi'
}
62.5% {
content: 'remir'
}
75% {
content: 'remirr'
}
87.5% {
content: 'remirro'
}
100% {
content: 'remirror'
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: black;
}
}
<h1></h1>
关于html - css打字眨眼动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60937703/