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

Thêm hiệu ứng chuyển tiếp CSS cho cả thuộc tính chiều rộng và chiều cao

Để thêm hiệu ứng chuyển tiếp cho thuộc tính chiều rộng và chiều cao của một phần tử, bạn có thể thử chạy đoạn mã sau

Ví dụ

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