Typewriter
タイプライター風テキスト表示。ヒーローセクションに。
HTML
<h1 class="typewriter">Build something great.</h1>
CSS
.typewriter {
display: inline-block;
font-size: 24px;
font-weight: 700;
letter-spacing: -.03em;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #1a1a1a;
max-width: max-content;
width: 0;
animation: typing 2s steps(22) 0.5s forwards, blink .6s step-end infinite;
}
@keyframes typing {
to { width: 22ch; }
}
@keyframes blink {
50% { border-color: transparent; }
}