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

सीएसएस फ्लेक्स संपत्ति को चेतन करें

<घंटा/>

CSS के साथ flex संपत्ति पर एनीमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .box {
            display: flex;
            background-color: orange;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .box > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
         div {
            animation: myanim 4s infinite;
         }
         @keyframes myanim {
            50% {
               flex: 1;
            }
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "box">
         <div style = "order: 8">Q1</div>
         <div style = "order: 6">Q2</div>
         <div style = "order: 2">Q3</div>
         <div style = "order: 1">Q4</div>
         <div style = "order: 7">Q5</div>
         <div style = "order: 4">Q6</div>
         <div style = "order: 3">Q7</div>
         <div style = "order: 5">Q8</div>
      </div>
   </body>
</html>

  1. चेतन सीएसएस आदेश संपत्ति

    CSS के साथ ऑर्डर प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo1 {             width: 600px

  1. एनिमेट सीएसएस जेड-इंडेक्स प्रॉपर्टी

    सीएसएस के साथ z-index प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {             position

  1. HTML DOM स्टाइल फ्लेक्स प्रॉपर्टी

    HTML DOM स्टाइल फ्लेक्स प्रॉपर्टी का उपयोग फ्लेक्स पर सेट डिस्प्ले प्रॉपर्टी वाले तत्वों के लिए लचीली लंबाई को सेट करने या वापस करने के लिए किया जाता है। इसका उपयोग flexGrow, flexShrink और flexBasis गुणों में हेरफेर करने के लिए किया जाता है। − . के लिए वाक्य रचना निम्नलिखित है फ्लेक्स प्रॉपर्टी से