टाइपराइटर प्रभाव - सीएसएस-ट्रिक्स

.typewriter h1 ( overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; ) /* The typing effect */ @keyframes typing ( from ( width: 0 ) to ( width: 100% ) ) /* The typewriter cursor effect */ @keyframes blink-caret ( from, to ( border-color: transparent ) 50% ( border-color: orange; ) )

कोड जेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन jrWwWM देखें।

डेमो फ्लेक्सबॉक्स पर निर्भर करता है, ताकि परीक्षण में लेआउट को प्रभावित कर सके
Autoprefixer के उपयोग को मानता है
पाठ कंटेनर की चौड़ाई का उपयोग पाठ की लंबाई के आधार पर किया जाएगा
typingएनीमेशन में अधिक चरणों को जोड़ने से टाइपिंग की चिकनाई बढ़ जाएगी
letter-spacingउपयोग किए जा रहे फ़ॉन्ट-परिवार और फ़ॉन्ट-आकार के आधार पर समायोजित करें

अधिक!

कुछ जावास्क्रिप्ट का उपयोग करते हैं, जो कभी-कभी बेहतर हो सकता है (एक समय में एक चरित्र को जोड़ना वास्तव में एक वास्तविक टाइपराइटर की तरह लगता है) और कभी-कभी (संभावित एक्सेसिबिलिटी चिंताओं) नहीं हो सकता है।

कोड टाइप पर थियागो टेल्स परेरा (@thiagoteles) द्वारा पेन टाइपराइटर एनीमेशन शुद्ध सीएसएस देखें।

CodePen पर साइमन शाहवेरी (@ hi-im-si) द्वारा पेन जेएस टाइपराइटर देखें।

CodePen पर gavra (@gavra) द्वारा पेन टाइपराइटर देखें।

CodePen पर डैनियलग्रोइन (@danielgroen) द्वारा पेन सीएसएस टाइपराइटर देखें।

CodePen पर स्टोव (@stevn) द्वारा पेन टिप्पी-टैपी-टाइपर देखें।

CodePen पर Joeri Boudewijns (@Bojoer) द्वारा ब्लैंकिंग केयर के साथ पेन सीएसएस टाइपिंग मल्टीपल लाइन्स देखें।