Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

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. Hiệu ứng này chỉ sử dụng CSS nên hoàn toàn không thay đổi tốc độ tải trang 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, nếu bạn muốn chèn hiệu ứng nào vào một số nơi nào khác mà cần 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 .

0 comments:

Post a Comment

Popular Posts