Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การทำแอนิเมชันคุณสมบัติ CSS border-top-right-radius


หากต้องการนำแอนิเมชันไปใช้กับคุณสมบัติ border-top-right-radius ใน 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>