How to create an animated typing effect

Feb 2, 2026
कैसे करना है

जब अच्छा इस्तेमाल किया, सीएसएस एनीमेशन आपकी साइट पर ब्याज और व्यक्तित्व जोड़ सकते हैं। इस लेख में, हम एक एनिमेटेड प्रभाव बनाने के तरीके के माध्यम से चलेंगे जो आपकी टाइपोग्राफी धीरे-धीरे दिखाई देगी, जैसे कि इसे टाइपराइटर पर टाइप किया जा रहा था। आप साइट पर कार्रवाई में एनीमेशन का एक उदाहरण देख सकते हैं [1 1] क्रिप्टन

, एक क्रिप्टोकुरेंसी ट्रेडिंग बॉट। प्रभाव प्रभावशाली है और इसे भी लागू करना आसान है।

सभ्य वेब डिज़ाइन बनाने के अन्य आसान तरीकों के लिए, एक उत्कृष्ट प्रयास करें वेबसाइट निर्माता उपकरण, या एक शीर्ष वेब होस्टिंग सर्विस। या, यह पता लगाने के लिए कि इस एनीमेशन को अपनी साइट पर कैसे प्राप्त करें।

  • सीएसएस एनीमेशन के नए फ्रंटियर का अन्वेषण करें

01. दस्तावेज़ दीक्षा [2 9]

पहला कदम वेबपृष्ठ की संरचना शुरू करना है। इसमें हेड और बॉडी सेक्शन को संग्रहीत करने के लिए जिम्मेदार एचटीएमएल कंटेनर शामिल है। जबकि हेड सेक्शन की मुख्य ज़िम्मेदारी बाहरी सीएसएस को लोड करना है, लेकिन बॉडी सेक्शन चरण 2 में बनाई गई एचटीएमएल सामग्री को स्टोर करेगा। 

 & lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; टाइपिंग प्रभाव & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" Href = "styles.css" / & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
*** चरण 2 यहाँ
& lt; / शरीर & gt;
& lt; / html & gt;

02. HTML सामग्री [2 9]

एचटीएमएल सामग्री में एक कंटेनर होता है जो 'टाइपिंग' क्लास का उपयोग करता है। इसका उपयोग सीएसएस द्वारा किसी भी बच्चे के तत्वों को टाइपिंग प्रभाव लागू करने के लिए किया जाएगा। बाल सामग्री तत्व एच 1 टैग से बनाया गया है, लेकिन आप एक पैराग्राफ के रूप में तत्व बनाने के लिए 'पी' जैसे किसी अन्य तत्व का उपयोग कर सकते हैं। 

 & lt; div class = "टाइपिंग" & gt;
  & lt; h1 & gt; अपना शीर्षक यहां रखो ... & lt; / h1 & gt;
& lt; / div & gt;

03. सीएसएस दीक्षा [2 9]

'Styles.css' नामक एक फ़ाइल बनाएं। सीएसएस का पहला कदम दस्तावेज़ और शरीर के कंटेनरों को बिना किसी दृश्य सीमा अंतर के पूर्ण ब्राउज़र विंडो को कवर करने के लिए परिभाषित करता है। इस चरण में काले पृष्ठ पृष्ठभूमि और सफेद पाठ रंगों के लिए डिफ़ॉल्ट रंग भी सेट हैं। पृष्ठ के भीतर सामग्री तत्व इस चरण में उनके डिफ़ॉल्ट रंग के रूप में रंग सेट का वारिस करेंगे। 

 ​​शरीर, एचटीएमएल {
  प्रदर्शन क्षेत्र;
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  पृष्ठभूमि: # 000;
  रंग: #fff;
  पैडिंग: 0;
  मार्जिन: 0;
}

04. बच्चों को टाइप करना [2 9]

टाइपिंग कंटेनर के भीतर सभी बच्चे टेक्स्ट रैपिंग के उपयोग के बिना एक पंक्ति से अधिक प्रदर्शित करने के लिए सेट हैं। सबसे महत्वपूर्ण बात यह है कि इन बाल तत्वों में 'टाइपिंग' एनीमेशन उनके लिए लागू होता है। यह एनीमेशन 50 फ्रेम स्नैपशॉट्स के साथ पांच सेकंड में खेलने के लिए तैयार है - जिसमें कंपित टाइपिंग प्रभाव की अनुमति मिलती है। 

 ​​.Typing & gt; * {
  बहुत ज्यादा गोपनीय;
  सफेद अंतरिक्ष: नोप्रैप;
  एनीमेशन: टाइपिंगनिम 5 एस चरण (50);
}

05. चेहरा आँखें [2 9]

प्रभाव एक एनिमेटेड चेहरे के साथ भी होता है जो टाइप किए गए टेक्स्ट को बताता प्रतीत होता है। यह चरण इस चेहरे की आंखों को एक सीएसएस 'आभासी' तत्व के रूप में बनाता है उपरांत चयनकर्ता। आंखें मूल पाठ के सापेक्ष रखी जाती हैं, इसकी सामग्री दो डॉट टेक्स्ट वर्णों के रूप में सेट होती है। 

 ​​.Typing & gt; *::उपरांत{
  सामग्री: "। ।";
  प्रदर्शन क्षेत्र;
  स्थिति: पूर्ण;
  शीर्ष: 1em;
  बाएं: .35em;
}

06. चेहरे का मुँह [2 9]

आंखों के साथ, चेहरे का मुंह एक सीएसएस वर्चुअल तत्व से बनाया जाता है - इस बार का उपयोग कर इससे पहले चयनकर्ता। मुंह पैरेंट टेक्स्ट तत्व के संबंध में स्थित है, साथ ही साथ एक गोल आकार के साथ एक सीमा त्रिज्या होने के साथ।

टाइपिंगपेक एनीमेशन लागू होता है; यह एनीमेशन के दो फ्रेम का उपयोग करके 0.5 सेकंड तक चलेगा। एनीमेशन को पांच गुना दोहराया जा रहा है, कुल एनीमेशन समय 2.5 सेकंड होगा। 

 ​​.Typing & gt; *::इससे पहले{
  सामग्री: "";
  स्थिति: पूर्ण;
  प्रदर्शन क्षेत्र;
  शीर्ष: 2.1em;
  बाएं: .25em;
  चौड़ाई: 1em;
  ऊंचाई: .1em;
  सीमा-त्रिज्या: 100%;
  पृष्ठभूमि: #fff;
  एनीमेशन: टाइपिंगपेक .5 एस चरण (2);
  एनीमेशन-पुनरावृत्ति-गणना: 5;
}

07. एनीमेशन परिभाषाएं [2 9]

यह चरण पिछले चरणों में बनाए गए तत्वों द्वारा संदर्भित एनिमेशन को परिभाषित करता है। टाइपिंगनीम टाइपिंग प्रभाव के लिए उपयोग किया गया एनीमेशन इसके तत्व को बिना किसी चौड़ाई से पूर्ण चौड़ाई तक बदल देता है। टाइपिंगपेक चेहरे के मुंह के लिए उपयोग की जाने वाली एनीमेशन अपने तत्व को फ्लैट को और अधिक खुले दिखाई देने से बदल देती है। 

 ​​@KeyFrames TypingAnim {
  {चौड़ाई: 0} से
  {चौड़ाई: 100%}
}
@keyframes typingspeak {
  0% {चौड़ाई: 1em; ऊंचाई: .1em}
  100% {चौड़ाई: 1em; ऊंचाई: .5em; }
}
***
[8 9]

[9 3] [9 6] [9 7]

बचाने के लिए डिजाइन फाइलें मिलीं?अपने अपग्रेड करें घन संग्रहण तो यह नौकरी पर निर्भर है।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर के अंक 275 में प्रकाशित किया गया था। [10 9] यहां 275 जारी करें [10 9] या [10 9] वेब डिजाइनर की सदस्यता लें [10 9] । [10 9]

संबंधित आलेख:

  • स्लिम यूआई एनिमेशन बनाएं
  • सीएसएस प्रदर्शन संपत्ति को समझना
  • एनिमेटेड स्टीम टेक्स्ट प्रभाव बनाएं

कैसे करना है - सर्वाधिक लोकप्रिय लेख

22 best UI design tools

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: आविष्कार) [1 9] सर्वश्रेष्ठ यूआई �..

5 hot new CSS features and how to use them

कैसे करना है Feb 2, 2026

2 का पृष्ठ 1: 5 नई सीएसएस विशेषताएं एक्सप्�..

Affinity Designer: How to use constraints

कैसे करना है Feb 2, 2026

एफ़िनिटी डिजाइनर एक लोकप्रिय है वेक्टर कला ..

An introduction to CSS custom properties

कैसे करना है Feb 2, 2026

सीएसएस प्रोसेसर की एक सर्वोत्तम सुविधाओं में से �..

Create illustrated portraits from photos

कैसे करना है Feb 2, 2026

मैंने अच्छी कला का अध्ययन किया और चित्रकारी त�..

फाउंडेशन के साथ एक कार्ड आधारित यूआई बनाएं

कैसे करना है Feb 2, 2026

कार्ड के आधार पर वेबसाइट लेआउट वेब पर ले लिय..

पेस्टल के साथ एक परिदृश्य कैसे आकर्षित करें

कैसे करना है Feb 2, 2026

यह पोस्ट आपको सिखाएगा कि पेस्टल के साथ एक परिदृश्..

How to get your ZBrush model into Maya

कैसे करना है Feb 2, 2026

इसके लिए माया ट्यूटोरियल मैं आपको यह दिखान�..

श्रेणियाँ