04/10/2018

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!