Tạo hiệu ứng xoay 360 độ

☼ Giờ bắt đầu thủ thuật

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