ด้วยความช่วยเหลือของ CSS แอนิเมชั่น เราสามารถสร้างแอนิเมชั่นเครื่องพิมพ์ดีดโดยใช้ JavaScript
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลกระทบนี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
font-family: Courier, monospace;
display: inline-block;
}
div > div {
overflow: hidden;
animation: enter 4s steps(30, end), blinker .65s step-end infinite;
white-space: nowrap;
font-size: 1.4em;;
border-right: 5px solid blue;
}
@keyframes enter {
0% {
width: 0%
}
100% {
width: 100%
}
}
@keyframes blinker {
0%, 100% {
border-color: transparent
}
50% {
border-color: blue;
}
}
</style>
</head>
<body>
<div class="typewriter">
<div class="typewriter-text">This is what you've been waiting for..</div>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้จะทำให้เกิดผลลัพธ์ดังต่อไปนี้ -
