[Share]Code hiệu ứng xoay vòng trang web

Hiệu ứng xoay vòng trang web 360 độ là một hiệu ứng rất thú vị và độc đáo cho những trang web trang trí. Chỉ với css, trang web của bạn sẽ trở nên đẹp hơn và thu hút nhiều người xem hơn. Và cũng bởi vì chỉ có css mà code này không ảnh hưởng đến tốc độ load của trang web. Người ta sẽ phải há hốc khi vào trang web của bạn. Bạn có thể xem DEMO hoặc tải file đầy đủ ở bên dưới. Bắt đầu nhé.

Hướng dẫn cách làm

Cách làm rất đơn giản và nhanh gọn. Các bạn vào chỉnh sửa mã nguồn, nhấn tổ hợp phím Ctrl F rồi tìm đến thẻ <head>.
Tiếp theo chèn đoạn code bên dưới vào ngay dưới thẻ mà ta vừa tìm. Save lại và tận hưởng thành quả.(Nhớ bỏ code này ở trong cặp thẻ <style></style> đã nhé)


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

Thật đơn giản phải không. Hãy gửi cho bạn bè để "Khoe" nhé.
Nếu bạn thấy bài viết này hữu ích thì hãy đăng ký kênh youtube của mình, một việc làm nhỏ có thể giúp mình có động lực để viết và chia sẻ nhiều bài hay hơn cho các bạn!