Hiệu ứng xoay 360 độ là một hiệu ứng hoạt hình khá đơn giản để thu hút người xem. Đây là một hiệu ứng rất dễ thực hiện, MyLop.BanMai.Info sẽ hướng dẫn những bạn nào mới tìm hiểu về CSS3 cách tạo ra hiệu ứng này nhé.
Hiệu ứng xoay 360 độ bằng CSS3 Animation
Xoay toàn trang Download Files
Bước 1) Tạo class .rotate360 trong CSS:
1 2 3 4 5 6 7 | @keyframes rotate360 { 100% { transform: rotate(360deg); } } .rotate360 { animation-name: rotate360; animation-duration: 2s; /* Thời gian xoay */ } |
Để tương thích với Google Chrome và các trình duyệt khác, bạn cần thêm vào các tiền tố tương ứng. Và đoạn code CSS có thể sẽ dài như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | @-webkit-keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate360 { 100% { -moz-transform: rotate(360deg); } } @-ms-keyframes rotate360 { 100% { -ms-transform: rotate(360deg); } } @-o-keyframes rotate360 { 100% { -o-transform: rotate(360deg); } } @keyframes rotate360 { 100% { transform: rotate(360deg); } } .rotate360 { -webkit-animation-name: rotate360; -moz-animation-name: rotate360; -ms-animation-name: rotate360; -o-animation-name: rotate360; animation-name: rotate360; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } |
Class .rotate360 có thể viết gọn lại thế này:
1 2 3 4 5 6 7 | .rotate360 { -webkit-animation: rotate360 2s; -moz-animation: rotate360 2s; -ms-animation: rotate360 2s; -o-animation: rotate360 2s; animation: rotate360 2s; } |
Bước 2) Áp dụng hiệu ứng xoay 360 độ vào các phần tử trong HTML.
Vì chúng ta đã xây dựng class .rotate360 ở bước trên, mà class thì có thể chèn vào bất kỳ đâu trong HTML, nên bạn có thể áp dụng hiệu ứng xoay 360 độ vào bất kỳ phần tử nào trong trang web.
Cách làm đơn giản như sau:
1 | <element class="rotate360">...</elemnet> |
Với <element> là tên của một thẻ nào đó mà bạn muốn áp dụng, VD <div>, <p>, <img>,…
Để áp dụng hiệu ứng xoay 360 độ cho toàn bộ trang web, hãy áp dụng class .rotate360 cho thẻ <body>:
1 | <body class="rotate360">...</body> |
Từ hiệu ứng này, bạn có thể tự tạo cho mình nhiều hiệu ứng khác nhau, VD hiệu ứng FadeIn chẳng hạn, tất cả phụ thuộc vào khả năng sáng tạo của bạn!
Hiệu ứng fadeIn Download Files
1 2 3 4 5 6 7 8 | @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation: fadeIn 4s ease-out; animation: fadeIn 4s ease-out; } |
1 | <body class="fadeIn">...</body> |
Để tìm hiểu kỹ hơn về CSS3 Animation, bạn tham khảo thêm tại W3Schools.
Nếu bạn ngại code CSS, hãy sử dụng Animate.css, một file css tuyệt vời của Daniel Eden, có rất nhiều hiệu ứng CSS3 đẹp mắt, hấp dẫn được sử dụng trong rất nhiều các trang web khác nhau.
Trên đây là bài hướng dẫn tạo hiệu ứng xoay 360 độ hết sức cơ bản, đơn giản và dễ làm theo, dành cho những bạn mới tìm hiểu về hoạt hình trong CSS3. Chúc bạn thành công!
Cheers,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017