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
Chỉ số 1.5s là tốc độ quay, càng nhỏ quay càng nhanh.
Bước 2:
Khi post ảnh dùng code
Lưu ý: Blog cần có hỗ trợ font awesome
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'/>
Không có nhận xét nào :
Đăng nhận xét
Bạn có thể sử dụng biểu cảm yahoo