4/23/2015

Hiệu ứng xoay 360 độ cho Blogspot và Website


Một đoạn CSS nhỏ sẽ giúp bạn tạo nên được hiệu ứng xoay 360 độ cho Blogspot và Website. Sự chuyển động có thể sẽ làm người xem web, blog của bạn thích thú hơn và cảm thấy đỡ nhàm chán hơn. Bài viết này Lãng Tử Studio chia
sẻ với bạn đọc cách thêm hiệu ứng này. Bạn sẽ thấy thích thú hơn khi bạn nhìn vào demo trực tiếp. Và nếu bạn muốn Blog, Web của mình cũng thực hiện được như thế thì hãy xem và làm theo hướng dẫn ngay bên dưới đây.

Hướng dẫn thêm hiệu ứng xoay 360 độ cho Blogspot và Website

Để làm được các bạn thực hiện theo sau (Lưu ý: thực hiện trên Website thì các bạn cũng làm tương tự)
- Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript và dán code dưới đây vào 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: 4s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; } </style>

Các bạn lưu tiện ích lại và xem kết quả
Như vậy là các bạn đã tạo xong sự khác biệt giữa Website của mình với Website khác. Một số yếu tố thuộc tính về thời gian xoay thì các bạn có thể tùy chỉnh theo ý mình.


xem thêm các thủ thuật khác tại Lãng Tử Studio


Đừng quên Like và Share nếu thấy bài viết bổ ích

0 nhận xét:

Đăng nhận xét