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

CSS background-size प्रॉपर्टी पर एनिमेशन करें


बैकग्राउंड साइज़ एनिमेशन

background-size प्रॉपर्टी पर CSS एनिमेशन लागू करें:

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 500px; height: 400px; background: yellow;
        background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
        animation: myanim 3s infinite;
        background-position: bottom left;
        background-size: 50px;
      }
      @keyframes myanim {
        20% {
          background-color: maroon;
          background-position: bottom right;
          background-size: 90px;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

  1. - CSS text-decoration-color प्रॉपर्टी को एनिमेट करें

    CSS में text-decoration-color प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह टेक्स्ट सजावट (अंडरलाइन, ओवरलाइन, लाइन-थ्रू) के रंग को बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo { position: absolute; right: 0;

  1. - CSS z-index प्रॉपर्टी को एनिमेट करें

    CSS में z-index प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह स्थित तत्वों के स्टैकिंग क्रम को बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { position: absolute; } #box div { background-color: orang

  1. - CSS width प्रॉपर्टी को एनिमेट करें

    CSS में width प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह तत्व की चौड़ाई को समय के साथ बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 250px; background-color: maroon; col