[ Tips ] Tạo hiêu ứng xoay 360 độ cho trang blog của bạn

Mọi Bài Đăng Đều Được Viết Bởi Admin Nguyễn Tỉnh, Vui Lòng Ghi Nguồn Khi Copy Bài Đăng Từ Trang Này!

Bài viết này mính sẽ hướng dẫn các bạn cách để trang blog của bạn xoay 360 độ khi bạn tải lại trang hoặc truy cập vào đọc một bài viết bất kỳ trên trang của bạn. Thủ thuật sẽ giúp cho trang blog của bạn đặc biệt hơn trong mắt độc giả.

Đoạn mã được sử dụng hoàn toàn là CSS3 sẽ giúp tốc độ tải trang của bạn không bị ảnh hưởng khi áp dụng thủ thuật này trên trang blog của bạn. 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, firefox, sarafi, IE9-10,....

Các bạn có thể xem demo bằng cách bấm nút tải lại (hoặc bấm phím số F5 trên bàn phím máy tính của bạn) khi xem bài viết này:

» Cách tạo hiệu ứng xoay tròn khi tải trang cho blogspot.

1. Đăng nhập vào trang blog của bạn.

2. Vào phần Chỉnh sửa HTML (Edit HLM)

3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.

@-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;
 } 

4. Lưu mẫu của bạn lại và xem kết quả đã làm được.

» Tùy chỉnh code: 

• 360deg là độ xoay trang của bạn bạn có thể điều chỉnh lại cho giảm bớt hoặc tăng số vòng xoay ở đoạn này. 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. Bạn có thể kéo dài thời gian hoặc rút ngắn nó. mẹo, nếu số vòng quay càng lớn thì thời gian nên để càng dài nếu không nhìn sẽ rất rồi mắt đó.

» Cách khác: 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.Javarscripts 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>

P/s: Còn gì thắc mắc hoặc chưa hiểu bạn có thể để lại comment ở bên dưới mính sẽ giải đáp cho cac bạn. Đừng quyên like hoặc cộng 1 bài viết nếu bạn thấy hữu ích nha.