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

Thuộc tính tốc ký chuyển tiếp CSS3

Thuộc tính tốc ký chuyển tiếp cho phép chúng tôi chỉ định thuộc tính chuyển tiếp, thời lượng chuyển tiếp, chức năng thời gian chuyển tiếp và độ trễ chuyển tiếp làm các giá trị cho thuộc tính chuyển tiếp trong một dòng.

Sau đây là mã cho thuộc tính tốc ký chuyển tiếp trong CSS -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
.container div {
   width: 300px;
   height: 100px;
   border-radius: 1px;
   background-color: rgb(25, 0, 255);
   border: 2px solid red;
   transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}
.container:hover div {
   background-color: purple;
   border-radius: 50%;
}
</style>
</head>
<body>
<h1>Transition shorthand property</h1>
<div class="container">
<div></div>
</div>
<h2>Hover over the above div to change its color and its shape to oval</h2>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Thuộc tính tốc ký chuyển tiếp CSS3

Thuộc tính tốc ký chuyển tiếp CSS3