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

सेट करें कि CSS के साथ एनिमेशन कितनी बार चलना चाहिए


एनिमेशन-पुनरावृत्ति-गणना का उपयोग करें यह निर्धारित करने के लिए कि सीएसएस के साथ एनीमेशन कितनी बार चलना चाहिए संपत्ति।

निम्न उदाहरण एनिमेशन की संख्या को 2 पर सेट करता है:

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-iteration-count: 2;
         }
         @keyframes myanim {
         from {
            background-color: green;
         }
         to {
               background-color: blue;
            }
         }
      </style>
   </head>

   <body>
      <div> </div>
   </body>
</html>

  1. CSS के साथ ग्रेडिएंट बैकग्राउंड कलर कैसे सेट करें

    CSS के साथ एक ग्रेडिएंट बैकग्राउंड कलर सेट करने के लिए, आपको linear-gradient() . जोड़ना होगा आपके background . पर कार्य करें संपत्ति। आइए एक साधारण बॉक्स क्लास बनाएं और इसे आज़माएं: .box { width: 200px; height: 200px; background: linear-gradient(yellow, red); } परिणाम: आप लीनियर ग्रेडिएंट

  1. CSS के साथ एक साधारण लूपिंग बैकग्राउंड कलर एनिमेशन कैसे बनाएं

    कीफ़्रेम और विभिन्न CSS एनिमेशन गुणों का उपयोग करके शुद्ध CSS के साथ एक साधारण एनिमेटेड पृष्ठभूमि रंग लूप बनाना सीखें। इस उदाहरण में, हम HTML <body> . को लक्षित कर रहे हैं तत्व सीधे CSS के साथ, लेकिन आप निम्न कोड उदाहरण को किसी भी HTML तत्व, वर्ग या आईडी पर लागू कर सकते हैं। कोड आप इस डेमो

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

    CSS एनिमेशन की मदद से, हम JavaScript का उपयोग करके एक टाइपराइटर एनिमेशन बना सकते हैं। निम्नलिखित उदाहरण इस आशय को दर्शाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div {    margin: 2%;    font-family: Courier, monospace;    display: inlin