Canlı Önizleme
Yazılım Kütüphanem'e Hoş Geldin.
Nasıl Kullanılır?
Metnin karakter sayısı değiştikçe CSS'teki 'steps(40, end)' daki 40 değerini metnin harf sayısına uyarlamanız karakter atlamasını engeller.
Kaynak Kodlar
HTML
<div class="typewriter">
<h1>Yazılım Kütüphanem'e Hoş Geldin.</h1>
</div>CSS
.typewriter { display: inline-block; font-family: monospace; }
.typewriter h1 { color: #fff; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }