Tạo hiệu ứng Load xoay 360 độ cho Blogspot cực chất

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.

☼ Giờ bắt đầu nhé :))

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

...

Nội dung chính