打字机效果
创建打字机效果动画。
定义两个动画,
typing用于字符动画,blink用于光标动画。使用
::after伪元素在容器元素中添加光标。使用 JavaScript 为内部元素设置文本,并设置包含字符数的
--characters变量。这个变量用于文本动画。使用
white-space: nowrap和overflow: hidden在必要时隐藏内容。
<div class="typewriter-effect"><div class="text" id="typewriter-text"></div>
</div>.typewriter-effect {display: flex;justify-content: center;font-family: monospace;
}.typewriter-effect > .text {max-width: 0;animation: typing 3s steps(var(--characters)) infinite;white-space: nowrap;overflow: hidden;
}.typewriter-effect::after {content: " |";animation: blink 1s infinite;animation-timing-function: step-end;
}@keyframes typing {75%,100% {max-width: calc(var(--characters) * 1ch);}
}@keyframes blink {0%,75%,100% {opacity: 1;}25% {opacity: 0;}
}const typeWriter = document.getElementById('typewriter-text');
const text = 'Lorem ipsum dolor sit amet.';typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);
这个技巧创建了一个有趣的打字机效果动画,看起来像是文本正在实时输入。这通常用于引起注意或为页面增添一些视觉趣味性。
