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

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

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

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

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

.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 .

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.