0 bình luận · lượt xem

Tạo hiệu ứng "nhảy" cho đối tượng trong Blogspot



Thủ thuật này sẽ làm hiệu ứng cho 1 đối tượng nào đó trong Website/Blogger có hiệu ứng nhảy làm tăng sự chú ý cho người dùng vào đối tượng đó.

Thủ thuật hoàn toàn sử dụng CSS3 để làm hiệu ứng "Nhảy" do đó hoàn toàn không làm ảnh hưởng đến tốc độ tải Website.

Hiệu ứng này có tên là Jump (Nhảy)

Hiệu ứng Animation Jump (Nhảy) bằng CSS3
Cách thực hiện:

Bước 1:

Xác định id/class của đối tượng muốn có hiệu ứng Nhảy.

Chỉ cần kiểm tra phần từ vào đối tượng bạn muốn tạo hiệu ứng nhảy là ta sẽ xác định được id/class của tối tượng.


Bước 2:

Chèn code CSS animation hiệu ứng nhảy 

Chèn vào trước thẻ ]]></b:skin> và thay lại tên đối tượng.

#tendoituong{animation: Jump 2s ease-in infinite}
@keyframes Jump {
48%,62%{transform:scale(1.0,1.0)}
50%{transform:scale(1.1,0.9)}
56%{transform:scale(0.9,1.1) translate(0,-5px)}
59%{transform:scale(1.0,1.0) translate(0,-3px)}
}

Lưu lại và kiểm tra.
Chúc bạn thảnh công!



Có thể bạn thích

Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!