CSS3 Keyframe - Hiệu ứng widget Iphone

Có lẽ với sự nổi tiếng của hãng Apple cùng những sản phẩm sử dụng IOS như Iphone, Ipad... các bạn đã từng thấy qua hiệu ứng phóng to và rung khi giữ tay vào một icon bất kì trên màn hinh. Bạn hoàn toàn có thể thiết kế hiệu ứng này cho website của mình và chúng tôi sẽ hướng dẫn bạn thực hiện điều đó.

Trước khi bắt đầu hướng dẫn, chúng ta cần phải biết tới một điều quan trọng, đặc biệt là khi sử dụng tính năng cao cấp như Keyframe trong CSS. Đó là về sự tương thích và hỗ trợ của trình duyệt cho tính năng này.

Bây giờ chúng ta hãy xem cách làm thế nào để hoàn thành hình ảnh động tuyệt vời này. Ý tưởng cơ bản là tạo ra một hiệu ứng di chuyển các mục tiêu một vài độ trong hai hướng bằng cách gọi trục Z. Bạn cần thiết lập một khoảng thời gian hiệu ứng khi giữ chuột và và sự đáp ứng của các hình ảnh động một cách nhanh chóng.

Chúng ta cùng xem qua ví dụ dưới đây:

1. @-webkit-keyframes wiggle {
2. f-rom {-webkit-transform: rotateZ(2deg);}
3. 50% {-webkit-transform: rotateZ(-2deg);}
4. to {-webkit-transform: rotateZ(2deg);}
5. }
6.  
7. .productBox {
8. -webkit-animation-name: wiggle;
9. -webkit-animation-duration: .4s;
10. -webkit-animation-iteration-count: infinite;
11. -webkit-animation-timing-function: ease;
12. }

Tất nhiên bạn có thể điều chỉnh thời gian và mức độ rung theo ý thích của bạn một cách dễ dàng. Bạn cũng có thể áp dụng điều này với các yếu tố khác trên trang web và cả các ứng dụng, thông qua việc sử dụng CSS.

Hy vọng bài viết này sẽ có ích cho bạn, trước khi rời đi, bạn có thể xem qua cách Đánh số tự động bằng CSS nhằm quản lý nội dung HTML của bạn được dễ dàng hơn. Cảm ơn các bạn đã theo dõi!