Hiệu ứng hover xoay ảnh liên tục chỉ với CSS


Các bài trước trong chuyên mục Hiệu ứng đã hướng dẫn nhiều cách tạo hiệu ứng cho ảnh trên blogspot khi rê chuột vào ảnh(hiệu ứng hover) như:
- Nghiêng ảnh
- Phóng to ảnh
- Lật ảnh
- Xoay 360 độ....
Tại bài này hướng dẫn các bạn tạo hiệu ứng hover xoay tròn liên tục cho ảnh trên blogspot.
DEMO
Rê chuột vào ảnh để xem hiệu ứng





Cách thực hiện
Bước 1:
Thêm CSS
.logo-img:hover{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}
Bước 2:
Khi post ảnh dùng code
<img alt="" class="logo-img" src="URL Ảnh cần hiển thị" width="300" />
Thay link ảnh và đặt chiều rộng ảnh(width) cho phù hợp.
Lưu ý:
Blog cần có font Awesome hỗ trợ.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Tham khảo thêm: Tự động xoay tròn ảnh


Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji