Để tạo Hiệu ứng chuyển tiếp CSS3, hãy sử dụng thuộc tính chuyển tiếp. Sau đây là đoạn mã để tạo hiệu ứng chuyển tiếp bằng CSS3 -
Ví dụ
<!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; background: rgb(25, 0, 255); border: 2px solid red; transition: width 2s; } .container:hover div { width: 100px; } </style> </head> <body> <h1>Transition effects example</h1> <div class="container"> <div></div> </div> <h2>Hover over the above div to reduce its width</h2> </body> </html>
Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi di chuột lên trên div -