Hiệu ứng xoay tròn khi rê chuột vào ảnh trong blogspot Chủ Nhật, 23 tháng 11, 2014

Thủ thuật này giúp tạo ra hiệu ứng xoay tròn ảnh 360 độ khi bạn ghê chuột vào hình ảnh giúp làm cho blog được thú vị hơn ngoài ra còn bo tròn hình ảnh lại 50%. Bạn có thể tùy chỉnh lại những dòng chữ mình đã đánh dấu màu đỏ

Hiệu ứng xoay tròn khi rê chuột vào ảnh

Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó

.post img {
    overflow: hidden; 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.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);
}

Thêm thủ thuật mới là phóng to và làm mờ ảnh

Thủ thuật này giúp tạo ra hiệu ứng phóng to ảnh và làm mờ hình ảnh. Bạn có thể tùy chỉnh lại những con số bên dưới

Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó

.post img:hover {  -webkit-transform: scale(1.01, 1.01);  -moz-transform: scale(1.01, 1.01);  -ms-transform: scale(1.01, 1.01);  -o-transform: scale(1.01, 1.01);  transform: scale(1.01, 1.01);  opacity: 0.5;}.post img {  -webkit-transition-duration: 1.0s;  /* Webkit: Animation duration; */  -moz-transition-duration: 1.0s;  -o-transition-duration: 1.0s;}

Thủ thuật làm chậm hiệu ứng rê chuột vào các thành phần

Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó

:hover{transition: all .5s ease-out;}