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

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


หากต้องการนำแอนิเมชันไปใช้กับคุณสมบัติ border-bottom-color ใน CSS สามารถลองรันโค้ดตัวอย่างด้านล่างได้

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>    div {       width: 500px;       height: 400px;       background: yellow;       border: 10px solid 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;          border-bottom-color: green;       }    } </style> </head> <body> <h2>Performing Animation for bottom border color</h2> <div></div> </body> </html>