tạo hiệu ứng 360 khi chuyển trang hoặc tải lại cho blog

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

1. Đăng nhập vào trang blog của bạn.
2. Vào phần Chỉnh sửa HTML (Edit HTML)
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; } <div> <br /></div> <div> <br /></div> <div> <div> <b>4. Lưu mẫu</b> của bạn lại và xem kết quả đã làm được.</div> <div> <br /></div> <div> <b>» Tùy chỉnh code: </b><br /><ul> <li><span style="color: red;"><b>360deg</b></span> 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.<b> </b>Lưu ý chỉnh sửa cả 3 đoạn vì nó ứng với các trình duyệt khác nhau.</li> <li><span style="color: blue;"><b>2s </b></span>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 đó.</li> </ul> </div> <br style="text-align: left;" /><div> <b>» Cách khác: </b>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):</div> </div> <div> <br /></div> <div> <b>Nguồn : NKBL</b></div> </div>

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>