Hiệu ứng quay tròn hình ảnh bằng CSS cho Blogger

Các bạn cũng đã biết hiện nay trên mạng đang chia sẻ khá nhiều hiệu ứng đẹp cho hình ảnh, hôm nay mình xin giới thiệu một hiệu ứng nhỏ nữa, quay một hình ảnh từ hình vuông sang hình tròn trong khá là hấp dẫn và bắt mặt người dùng. Hiệu ứng này chỉ sử dụng CSS nên bạn có thể hoàn toàn yên tâm về tốc độ tải trang trên blog của bạn.

Hiệu ứng quay tròn hình ảnh bằng CSS cho Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML


Bước 2: Tiếp tục tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

.post img {
    border: 10px solid #fff;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #111;
    box-shadow: 5px 5px 5px #111;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    margin: 20px;
}

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

Bước 3: Lưu lại giao diện hiện tại.

Như vậy đã hoàn thành việc thêm hiệu ứng xoay hình ảnh vào blog của bạn, như bạn cũng thấy CSS3 ngày càng phát triển và mạnh mẽ, chúng ta có thể tạo ra rất nhiều hiệu ứng mới lạ từ nó. Nếu bạn muốn chèn hiệu ứng này bất cứ vị trí nào khác trên blog của bạn mà cần được hỗ trợ, bạn có thể để lại nhận xét phía dưới. Mong rằng thủ thuật nhỏ này tăng thêm vẻ đẹp cho website của bạn .