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

CSS बॉर्डर-टॉप-राइट-रेडियस प्रॉपर्टी पर एनिमेशन करें

<घंटा/>

बॉर्डर-टॉप-राइट-रेडियस . पर एनिमेशन लागू करने के लिए सीएसएस के साथ संपत्ति, आप निम्न कोड को चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         table,th,td {
            border: 2px solid black;
         }
         #newTable {
            width: 500px;
            height: 300px;
            background: yellow;
            border: 15px solid yellow;
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            30% {
               background-color: orange;
               border-spacing: 50px;
               border-top-color: red;
               border-top-right-radius: 150px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation for border top right radius</h2>
      <table id = "newTable">
         <tr>
            <th>Subject</th>
            <th>Student</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>PHP</td>
            <td>Tom</td>
            <td>90</td>
         </tr>
         <tr>
            <td>Java</td>
            <td>Henry</td>
            <td>70</td>
         </tr>
      </table>
   </body>
</html>

  1. CSS परिप्रेक्ष्य-मूल संपत्ति पर एनिमेशन निष्पादित करें

    परिप्रेक्ष्य-मूल पर एनिमेशन लागू करने के लिए CSS के साथ संपत्ति, आप निम्न कोड चलाने का प्रयास कर सकते हैं - उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo1 {             posi

  1. CSS परिप्रेक्ष्य संपत्ति पर एनिमेशन निष्पादित करें

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

  1. CSS पैडिंग-टॉप प्रॉपर्टी पर एनिमेशन करें

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