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

☼ 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.

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

Blog Nguyễn Tĩnh 33

P/s :

Nguyễn Viết Tĩnh