Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ background-color:green; width:100px; height:50px; margin-bottom:10px; color:white; transition-property:width; transition-duration:10s; } div:hover{ width:400px; } </style> </head> <body> <p>- Các bạn hãy thử dí con trỏ vào từng phần tử bên dưới để trải nghiệm tốc độ luân chuyển giá trị của hiệu ứng.</p> <div style="transition-timing-function:linear">linear</div> <div style="transition-timing-function:ease">ease</div> <div style="transition-timing-function:ease-in">ease-in</div> <div style="transition-timing-function:ease-out">ease-out</div> <div style="transition-timing-function:ease-in-out">ease-in-out</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ background-color:green; width:100px; height:50px; margin-bottom:10px; color:white; transition-property:width; transition-duration:10s; } div:hover{ width:400px; } </style> </head> <body> <p>- Các bạn hãy thử dí con trỏ vào từng phần tử bên dưới để trải nghiệm tốc độ luân chuyển giá trị của hiệu ứng.</p> <div style="transition-timing-function:linear">linear</div> <div style="transition-timing-function:ease">ease</div> <div style="transition-timing-function:ease-in">ease-in</div> <div style="transition-timing-function:ease-out">ease-out</div> <div style="transition-timing-function:ease-in-out">ease-in-out</div> </body> </html>