Hiệu ứng xoay tròn hình ảnh cho Blogger

bùi sang thọ | 4.3.15 | Blog |

Bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng quay một hình ảnh từ hình vuông sang hình tròn trông khá là hấp dẫn và bắt mắt độc giả. Bên dưới là hình ảnh đã áp dụng hiệu ứng này (đã chỉnh sửa đôi chút), bạn chạm vào để xem nhé. Vì đây là hiệu ứng bằng CSS nên bạn có thể yên tâm về tốc độ tải trang của mình. Bài viết tham khảo tại đây.

1. Thêm đoạn CODE sau vào trước thẻ đóng ]]<>/b:skin>

.post img {
    border: 2px solid #098047;
    overflow: hidden;
    transition: all .5s ease;
    margin: 20px;
}

.post img:hover {
    border-radius: 50%;
    transform: rotate(360deg);
}

Trong đó 

border: 2px solid #098047;

là đường viền cho hình ảnh, không thích bạn có thể bỏ đi.

2. Bạn chọn Lưu mẫu .