Hôm nay mình xin giới
thiệu hiệu ứng xoay 360 độ cho Blogspot (khi độc giả truy cập hoặc Refresh lại trang
thì hiệu ứng này sẽ xuất hiện). Sự chuyển động có thể sẽ làm người xem Blog/Website
của bạn thích thú hơn và cảm thấy đỡ nhàm chán hơn. Ngoài ra, hiệu ứng xoay 300
độ mình đã thực hiện trực tiếp trên bài viết này. Nếu bạn nào để ý thì thấy
ngay, không tin các bạn bấm F5 là biết liền. JJJ
Đọc thêm:
☼
Giờ bắt đầu thủ thuật cùng Windows2it.
Cách 1: Cài đặt trực tiếp
vào Template: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl +
F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ
</b:skin> và Lưu mẫu lại.
@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll { 100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll { 100% {
-webkit-transform: rotate(360deg);
}
}
body{
-moz-animation-name: roll;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll; -o-animation-duration: 2s;
-o-animation-iteration-count: 2;
-webkit-animation-name: roll;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
Cách 2: Cài đặt tùy ý: Bạn
cũng có thể áp dụng nó cho một bài viết duy nhất bằng cách dán đoạn code bên dưới
vào phần HTML của bài viết (Hoặc dán vào trong một tiện ích HTML/JavaScript của
bạn)
<style>
@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll { 100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll { 100% {
-webkit-transform: rotate(360deg);
}
}
body{
-moz-animation-name: roll;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll; -o-animation-duration: 2s;
-o-animation-iteration-count: 2;
-webkit-animation-name: roll;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
</style>
Chú ý: Vì đoạn code là CSS3 nên trên một
số trình duyệt như IE5, 6 , 7 sẽ không hoạt động. Hoạt động tốt trên chroome,
cococ, firefox, sarafi, IE9-10,.... Hiệu ứng này hoàn toàn không ảnh hưởng tới tốc độ tải trang nên các Bạn cứ yến tâm nhé!
☼
Tùy chỉnh
·
360deg đây là góc xoay của trang ở đây
là 3600. Lưu ý chỉnh sửa cả 3 đoạn vì nó ứng với các trình duyệt
khác nhau.
·
2s là thời gian để xoay 360deg trên (Thời
gian để thực hiện hết một chu kỳ). Mẹo, nếu góc quay càng lớn thì thời gian nên
để càng dài.
Nếu bạn thích bài viết này, hãy
subscribe Blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất
qua email nhé. Cảm ơn rất nhiều JJJ
Backlink: Sách toán ôn thi đại học.
MONG ad chia sẻ thiêm nhiều tiện ích hơn nữa cho blogg
http://notebookmmo.blogspot.com.
xin phép ad để liên kết blog của ad vào blog của minh nha
http://notebookmmo.blogspot.com/
demo nguoi ta :http://megamag-pbt.blogspot.com/ khong biet co phai mua ban quyen moi co ko nua neu ad biet chi giup mminh vs nha thanks ad
>> Lại đổ template nữa rồi à :)
Đăng nhận xét