Hướng Dẫn Tạo Hiệu Ứng Xoay 360 Độ Cho Blogsport

Hướng Dẫn Tạo Hiệu Ứng Xoay 360 Độ Cho Blogsport 

Chào mừng  các bạn ghé thăn Blog Kiến thức seo .Hãy cùng tôi khám phá  những điều hay và thú vị của blog nhé .Hôm nay tôi  xin giới thiệu với các bạn một hiệu ứng khá hay cho blogsport đó hiệu ứng xoay 360 độ cho trang của blog .Nếu các bạn để ý thì sẽ thấy mình đã áp dụng hiệu ứng này cho bài viết này đấy (Nếu chưa thấy thì các bạn có thể f5 lại để xem nhé ) .Với hiệu ứng này Blog của bạn sẽ trở nên thú vị hơn và khách truy cập sẽ cảm thấy thích thú tránh sự nhàm chán  .


Xem thêm :

• Code tạo khung cho các đoạn trích dẫn hay code 
• Hướng dẫn chèn khung comment facebook vào blogsport
• Tạo hiệu ứng trỏ chuột cực đẹp cho blogsport

Hãy cùng Kiến thức seo thực hiện nhé :

Cách 1 : Chèn trực tiếp vào Template

Các bạn vào Blog => Mẫu => Chỉnh sửa HTML  Sau đó nhấn tổ hợp Ctrl F tìm thẻ </b:skin>
Sau đó Dán đoạn Code phía dưới đây vào trên thẻ </b:skin> Cuối cùng là Lưu Mẫu
                <Với cách này thì các bạn áp dụng cho tất cả các trang trong blog >

@-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 : Tùy ý bạn có thể tích hợp hiệu ứng này cho 1 bài viết bằng cách dán đoạn code dưới đây vào phần HTML của bài viết (Hoắc dán vào 1 tiện ích HTML/Javascrip của blog )

<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à Css 3 nên một số trình duyệt như IE 5,6,7 sẽ không hoạt động .Hoạt động tốt trên các trình duyệt Chroom ,Cococ,Firefox,...
Hiệu ứng này hoàn toàn không ảnh hưởng tới tốc độ load trang nhé .Nên các bạn yên tâm mà sử dụng

Tùy chỉnh  :
          360 deg : là góc xoay của trang ,như ở trên là 360độ ,Nếu chỉnh phải chỉnh cả 3 đoạn vì nó tương thích với các trình duyệt khác nhau .
          2s là thời gian Hiệu ứng xảy ra : Thời gian càng lớn thì hiệu ứng càng chậm
Hãy tùy chỉnh theo ý thích nhé .

Chúc các bạn thành công .
Nếu thấy bài viết hay thì chia sẻ với mọi người nhé .

Browse More Articles

Tweet

Written by Admin

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.