Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS के साथ टाइपराइटर एनिमेशन कैसे बनाएं?

<घंटा/>

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>

आउटपुट

यह निम्नलिखित परिणाम देगा -

CSS के साथ टाइपराइटर एनिमेशन कैसे बनाएं?


  1. CSS के साथ कार्ड कैसे बनाएं?

    CSS के साथ कार्ड बनाने के लिए, कोड इस प्रकार है - उदाहरण body{ font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; मार्जिन:20 पीएक्स; } .कार्ड { बॉक्स-छाया:0 4px 8px 0 rgba(0,0,0,0.2); चौड़ाई:40%; अधिकतम-चौड़ाई:300px; पृष्ठभूमि-रंग:आरजीबी (56, 185, 185); } .कार्ड:होवर {बॉक्स-छाया:0 8px 16

  1. CSS के साथ कूपन कैसे बनाएं?

    CSS के साथ एक कूपन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma

  1. सीएसएस के साथ तीर कैसे बनाएं?

    सीएसएस के साथ तीर बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma,