Hiệu ứng tự động xoay tròn ảnh với css trên blogspot

Nhiều khi trong thiết kế web/blog bạn cần trang trí một chút bằng các hiệu ứng để tạo điểm nhấn, tạo chú ý cho khách truy cập thêm ấn tượng.

Có rất nhiều hiệu ứng hấp dẫn như: Tuyết rơi, mưa rơi, pháo hoa, hiệu ứng chữ, hiệu ứng nền...hiệu ứng xoay tròn ảnh khi rê chuột...và bài này giới thiệu cho bạn hiệu ứng tự động xoay tròn ảnh vô hạn với chỉ css.


DEMO:



Cách thực hiện

Bước 1: Thêm css

.logo-img{-webkit-animation:fa-spin 1.5s infinite linear;animation:fa-spin 1.5s infinite linear}

Chỉ số 1.5s là tốc độ quay, càng nhỏ quay càng nhanh.

Bước 2:

Khi post ảnh dùng code

<img alt="" class="logo-img" src="URL Ảnh cần hiển thị" width="300" />

Lưu ý: Blog cần có hỗ trợ font awesome

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>