Làm hiệu ứng popout bằng CSS3

Xem ngay bài viết tuyệt vời này để nhận được các hướng dẫn và ví dụ cho CSS3 box-shadow, CSS3 transforms và keyframes animation cũng như đi sâu vào chi tiết với hệ màu RGBA và hiệu ứng :hover. Chỉ trong vài phút, bạn sẽ biết thêm về các công cụ của CSS3 và các tình năng mà bạn có thể bỏ hàng giờ ra để “chơi” với nó.

Trước tiên, bạn sẽ thấy hiệu ứng popout trong ví dụ với giỏ hàng. Có thể bạn sẽ không muốn sử dụng chúng trong thực tế nhưng nó sẽ là nơi bắt đầu để bạn học một cách hiệu quả.

Sau đó thì video sẽ chạy khá nhanh (vẫn chi tiết) thông qua các cú pháp chính xác cho shadow và @-webkit-keyframes, cho bạn thấy cách tạo ra một vòng lặp mỗi 1 giây với 3 giai đoạn, kích hoạt khi bắt đầu hiệu ứng :hover. Một số ví dụ “kinh khủng” được đưa ra cho bạn thấy những thứ cần tránh trong công việc thực tế.

Dưới đây là code cơ bản, bạn có thể xem qua và tập sử dụng nó:

1. /* Registers a keyframe animation with the label “pulse” */
2. @-webkit-keyframes pulse {
3. 0% {
4. -webkit-box-shadow: 0px 0px 5px #204698, 0 0 15px 0px white;
5. }
6. 50% {
7. -webkit-box-shadow: 0px 0px 15px 15px #204698, 0 0 15px 25px rgba(255, 255, 255, 0.4);
8. }
9. 100% {
10. -webkit-box-shadow: 0px 0px 5px #204698, 0 0 15px 0px white;
11. }
12. }
13.  
14. /* apply ‘pulse’ keyframes animation to element on hover: */
15. .myClass:hover {
16. -webkit-animation-name: pulse; /* our animation, above */
17. -webkit-animation-:iteration-count: infinite; /* keep running*/
18. -webkit-animation-:timing-function: linear; /* no easing */
19. -webkit-animation-duration: 1s; /* takes 1 second */
20. }

 Xem ngay bài viết Tổng quan .htacess và những tác dụng tuyệt vời! để tìm hiểu thêm về .htaccess và những hiệu quả mà nó đem lại trong việc quản lý, cấu hình website.