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
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ướiBước 1:
Vào mẫu nhấn Ctrl
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ó
Vào mẫu nhấn Ctrl
Bước 2:
Dán đoạn code bên dưới vào trước nó
:hover{transition: all .5s ease-out;}
» CEO/FOUNDER tại Giải Pháp WebSFY - Solution For You
» Chuyên viên tư vấn chiến lược Marketing Online: 0932 913.631 - Mr.Huỳnh Phụng