CSS অ্যানিমেশনের সাহায্যে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি টাইপরাইটার অ্যানিমেশন তৈরি করতে পারি।
নিম্নলিখিত উদাহরণটি এই প্রভাবকে চিত্রিত করে৷
৷উদাহরণ
<!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> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
