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á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 đó.