CSS3 Transitions Tạo hiệu ứng mờ dần đẹp
Các nhà thiết kế web từ lâu đã muốn kiểm soát nhiều hơn các trang mà họ đã tạo khi CSS3 xuất hiện. Các phong cách mới được giới thiệu trong CSS3 đã cho các chuyên gia web khả năng thêm các hiệu ứng giống như Photoshop vào các trang của họ. Điều này bao gồm các thuộc tính như đổ bóng và phát sáng , các góc tròn và hơn thế nữa. CSS3 cũng giới thiệu các hiệu ứng giống như hình động có thể được sử dụng để tạo ra sự tương tác tốt đẹp trên các trang web.
Một hiệu ứng hình ảnh rất đẹp mà bạn có thể thêm vào các yếu tố trong trang web của mình bằng cách sử dụng CSS3 là làm cho chúng mờ dần vào và ra bằng cách sử dụng kết hợp các thuộc tính cho độ mờ và chuyển đổi. Đây là cách dễ dàng và được hỗ trợ tốt để làm cho các trang của bạn tương tác hơn bằng cách tạo các khu vực bị mờ đi vào trọng tâm khi khách truy cập trang web làm điều gì đó, như di chuột qua phần tử đó.
Chúng ta hãy xem việc thêm hiệu ứng trực quan tương tác này vào các yếu tố khác nhau trên các trang web của bạn dễ dàng như thế nào ..
Hãy thay đổi độ mờ trên di chuột
Chúng tôi sẽ bắt đầu bằng cách xem xét cách thay đổi độ mờ của hình ảnh khi khách hàng đang di chuột qua phần tử đó. Đối với ví dụ này (HTML được hiển thị bên dưới) Tôi đang sử dụng một hình ảnh với thuộc tính class của greydout.
Để biến nó thành màu xám, chúng tôi thêm các quy tắc kiểu sau vào biểu định kiểu CSS của chúng tôi:
.greydout {
-Webkit-opacity: 0,25;
-moz-opacity: 0,25;
độ mờ: 0,25;
}
Các cài đặt độ mờ này chuyển thành 25%. Điều này có nghĩa là hình ảnh sẽ được hiển thị bằng 1/4 độ trong suốt bình thường của nó. Hoàn toàn mờ đục không có độ trong suốt sẽ là 100% trong khi 0% sẽ hoàn toàn trong suốt.
Tiếp theo, để làm cho hình ảnh trở nên rõ ràng (hoặc chính xác hơn, để trở nên hoàn toàn mờ đục) khi con chuột được di chuột qua nó, bạn sẽ thêm: pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
độ mờ: 1;
}
Bạn sẽ nhận thấy rằng, đối với những ví dụ này, tôi đang sử dụng các phiên bản tiền tố của nhà cung cấp để đảm bảo khả năng tương thích ngược cho các phiên bản cũ hơn của các trình duyệt đó. Trong khi đây là một thực hành tốt, thực tế là quy tắc Opacity hiện được hỗ trợ tốt bởi các trình duyệt và nó là khá an toàn để thả các nhà cung cấp tiền tố dòng. Tuy nhiên, cũng không có lý do gì để không bao gồm các tiền tố này nếu bạn muốn đảm bảo hỗ trợ cho các phiên bản trình duyệt cũ hơn. Chỉ cần chắc chắn thực hiện theo các thực hành tốt nhất được chấp nhận của kết thúc tuyên bố với phiên bản bình thường, không có tiền tố của phong cách.
Nếu bạn triển khai điều này trên một trang web, bạn sẽ thấy rằng điều chỉnh độ mờ đục này là một thay đổi rất đột ngột. Đầu tiên nó là màu xám và sau đó nó không phải, không có trạng thái tạm thời giữa hai. Nó giống như một công tắc đèn - bật hoặc tắt. Đây có thể là những gì bạn muốn, nhưng bạn cũng có thể muốn thử nghiệm với thay đổi dần dần.
Để thêm một hiệu ứng thực sự tốt đẹp và làm cho mờ dần dần dần này, bạn muốn thêm thuộc tính chuyển tiếp vào lớp .greydout:
.greydout {
-Webkit-opacity: 0,25;
-moz-opacity: 0,25;
độ mờ: 0,25;
-webkit-transition: tất cả 3s dễ dàng;
-moz-transition: tất cả 3s dễ dàng;
-ms-transition: tất cả 3s dễ dàng;
-o-transition: tất cả 3s dễ dàng;
chuyển đổi: tất cả 3s dễ dàng;
}
Với mã này, thay đổi sẽ chuyển dần dần thay vì chỉ chuyển đổi đột ngột.
Một lần nữa, chúng tôi đang sử dụng một số quy tắc tiền tố của nhà cung cấp tại đây. Chuyển đổi không được hỗ trợ tốt như độ mờ đục, vì vậy các tiền tố này có ý nghĩa.
Một điều cần nhớ khi bạn lên kế hoạch cho các tương tác này là thiết bị màn hình cảm ứng không có trạng thái "di chuột", vì vậy những hiệu ứng này thường bị mất trên bất kỳ ai sử dụng thiết bị màn hình cảm ứng như điện thoại di động. Quá trình chuyển đổi thường xảy ra, nhưng nó xảy ra quá nhanh đến mức chúng thực sự không thể nhìn thấy được. Đó là tốt nếu bạn đang thêm này như là một hiệu ứng tiền thưởng tốt đẹp, nhưng tránh bất kỳ thay đổi mà CẦN để được nhìn thấy cho nội dung được hiểu.
Fading Out là có thể quá
Bạn không cần phải bắt đầu với một hình ảnh mờ nhạt, bạn có thể sử dụng các hiệu ứng chuyển tiếp và độ mờ để mờ dần khỏi một hình ảnh hoàn toàn mờ đục. Sử dụng cùng một hình ảnh, chỉ với một lớp withfadeout:
class = "withfadeout">
Cũng giống như trước đây, bạn thay đổi độ mờ bằng cách sử dụng công cụ chọn: hover:
.withfadeout {
-webkit-transition: tất cả 2 giây dễ dàng;
-moz-transition: tất cả 2 giây dễ dàng;
-ms-transition: tất cả 2 giây dễ dàng;
-o-transition: tất cả 2 giây dễ dàng;
chuyển đổi: tất cả 2 giây dễ dàng;
}
.withfadeout: hover {
-Webkit-opacity: 0,25;
-moz-opacity: 0,25;
độ mờ: 0,25;
}
Trong ví dụ này, hình ảnh sẽ chuyển từ hoàn toàn mờ đục sang phần nào trong suốt - ngược lại ví dụ đầu tiên của chúng ta.
Vượt ra ngoài hình ảnh
Thật tuyệt vời khi bạn có thể áp dụng các hiệu ứng chuyển tiếp hình ảnh này và làm mất dần các hình ảnh, nhưng bạn không bị giới hạn chỉ sử dụng hình ảnh với các hiệu ứng CSS này. Bạn có thể dễ dàng tạo các nút kiểu CSS mờ dần khi được bấm và giữ. Bạn chỉ cần đặt độ mờ bằng cách sử dụng lớp giả: hoạt động và đặt chuyển tiếp trên lớp xác định nút. Nhấp và giữ nút này để xem điều gì xảy ra.
Có thể tạo ra bất kỳ yếu tố hình ảnh nào mờ dần khi di chuột qua hoặc nhấp vào. Trong ví dụ này, tôi thay đổi độ mờ đục của div và màu của văn bản khi con chuột vượt qua nó. Đây là CSS:
#myDiv {
chiều rộng: 280px;
màu nền: # 557A47;
màu sắc: #dfdfdf;
đệm: 10px;
-webkit-transition: tất cả 4 giây dễ dàng bỏ ra;
-moz-transition: tất cả các số 0 dễ dàng bỏ ra 4 giây;
-ms-transition: tất cả các số 0 dễ dàng;
-o-quá trình chuyển đổi: tất cả các số 0 trong số 0 giây;
quá trình chuyển đổi: tất cả các số 0 trong số 0 giây;
}
#myDiv: di chuột {
-Webkit-opacity: 0,25;
-moz-opacity: 0,25;
độ mờ: 0,25;
màu: # 000;
}
Menu điều hướng có thể hưởng lợi từ màu nền mờ dần
Trong menu điều hướng đơn giản này, màu nền mờ dần dần dần khi tôi di chuột qua các mục menu. Đây là HTML:
- Nhà
- Hướng dẫn CSS3
- Thuộc tính CSS3
Và đây là CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
Hiển thị nội dòng;
float: trái;
đệm: 5px 15px;
lề: 0 5px;
-webkit-transition: tất cả 2s tuyến tính;
-moz-transition: tất cả 2s tuyến tính;
-ms-transition: tất cả 2s tuyến tính;
-o-transition: tất cả 2s tuyến tính;
chuyển tiếp: tất cả 2s tuyến tính;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
màu nền: # DAF197;
}
Hỗ trợ trình duyệt
Như tôi đã đề cập đến một vài lần rồi, những kiểu này có hỗ trợ trình duyệt rất tốt, vì vậy bạn nên thoải mái sử dụng chúng mà không có bất kỳ sự lo lắng nào. Ngoại lệ duy nhất cho điều này là nhiều phiên bản cũ hơn của Internet Explorer, nhưng với quyết định gần đây của Microsoft để kết thúc hỗ trợ cho tất cả các phiên bản IE dưới 11, các trình duyệt cũ ngày càng trở nên ít hơn - và thực tế, nếu trình duyệt cũ không thấy sự chuyển đổi mờ dần này, điều đó không phải là một vấn đề lớn. Miễn là bạn hạn chế các loại hiệu ứng này để tương tác thú vị và không dựa vào chúng để thúc đẩy chức năng hoặc tiết lộ nội dung chính, thì các trình duyệt cũ hơn không hỗ trợ hiệu ứng sẽ có ít trải nghiệm thú vị hơn, nhưng người dùng trên các trình duyệt đó thậm chí sẽ không biết sự khác biệt, đặc biệt là nếu họ có thể sử dụng trang web như bình thường và nhận được thông tin mà họ cần.
Extra Fun, Hoán đổi hai hình ảnh
Đây là một ví dụ về làm thế nào để làm mờ một hình ảnh khác. Sử dụng HTML:
Và CSS làm cho một cái hoàn toàn minh bạch trong khi cái kia hoàn toàn mờ đục và sau đó quá trình chuyển đổi hoán đổi cả hai:
.swapMe img {-webkit-transition: tất cả 1 giây dễ dàng-in-out; -moz-transition: tất cả 1s dễ dàng-in-out; -ms-transition: tất cả 1s dễ dàng-in-out; -o-chuyển tiếp: tất cả 1s dễ dàng-in-out; chuyển đổi: tất cả 1s dễ dàng-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; độ mờ: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; độ mờ: 0; }