Computer >> Máy Tính >  >> Lập trình >> CSS

Làm thế nào để tạo hiệu ứng chuyển tiếp với CSS?

Để tạo hiệu ứng chuyển tiếp, hãy đặt thuộc tính cho hiệu ứng chuyển tiếp. Cùng với đó, hãy đặt thời gian có hiệu lực.

transition: height 5s;

Bạn có thể thử chạy đoạn mã sau để tạo hiệu ứng chuyển tiếp

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 3s;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Hover over the below box to change its width.</p>
      <div></div>
   </body>
</html>