Thứ Hai, 30 tháng 12, 2013
CSS3 Transitions
CSS3 chuyển tiếp
Với CSS3, chúng ta có thể thêm hiệu ứng khi chuyển đổi từ một phong cách khác, mà không sử dụng hình ảnh động Flash hoặc JavaScripts.
Chuột lên các yếu tố dưới đây:
CSS3chuyển tiếp
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| quá trình chuyển đổi | |||||
Internet Explorer 10, Firefox, Chrome, và Opera hỗ trợ quá trình chuyển đổi tài sản.
Safari đòi hỏi các tiền tố-webkit-.
Lưu ý: Internet Explorer 9, và các phiên bản trước đó, không hỗ trợ tài sản chuyển đổi.
Lưu ý: Chrome 25, và các phiên bản trước đó, đòi hỏi phải có tiền tố-webkit-.
Như thế nào?
Quá trình chuyển đổi CSS3 là hiệu ứng cho phép một yếu tố dần dần thay đổi từ một phong cách khác.
Để làm điều này, bạn phải xác định hai điều:
- Xác định CSS tài sản mà bạn muốn thêm hiệu ứng cho
- Xác định thời gian hiệu lực.
Ví dụ
Chuyển đổi ảnh hưởng đến sở hữu chiều rộng, thời gian: 2 giây:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Lưu ý: Nếu thời gian không xác định, quá trình chuyển đổi sẽ không có hiệu lực, bởi vì giá trị mặc định là 0.
Hiệu quả sẽ bắt đầu khi tài sản CSS quy định thay đổi giá trị. Một sự thay đổi thuộc tính CSS điển hình sẽ là khi người dùng di chuột qua một phần tử:
Lưu ý: Khi con trỏ chuột ra khỏi phần tử, nó dần dần thay đổi trở lại với phong cách ban đầu của nó.
Nhiều thay đổi
Để thêm hiệu ứng chuyển tiếp cho nhiều hơn một phong cách, thêm nhiều thuộc tính, cách nhau bằng dấu phẩy:
Ví dụ
Thêm hiệu ứng vào chiều rộng, chiều cao, và việc chuyển đổi:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>Hover over me to see the transition effect!</div>
</body>
</html>
Thử nó cho mình »
Thuộc tính CSS3 chuyển tiếp
Hai ví dụ dưới đây trình bày tất cả các đặc tính chuyển tiếp:
Ví dụ
Sử dụng tất cả các đặc tính chuyển tiếp trong một ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>
Thử nó cho mình »
Ví dụ
Các hiệu ứng chuyển tiếp tương tự như trên, sử dụng tài sản chuyển tiếp viết tắt:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét