W3.CSS Animations
Hoạt hình rất thú vị!
Lớp hoạt hình W3.CSS
W3.CSS cung cấp các lớp sau cho hoạt ảnh:
| Lớp học | Xác định |
|---|---|
| w3-animate-top | Trang trình bày một phần tử từ trên cùng (-300px đến 0) |
| w3-animate-bottom | Trang trình bày một phần tử từ dưới cùng (-300px đến 0) |
| w3-animate-left | Trang trình bày trong một phần tử từ bên trái (-300px đến 0) |
| w3-animate-right | Trang trình bày một phần tử từ bên phải (-300px đến 0) |
| w3-animate-opacity | Hoạt ảnh độ mờ của một phần tử từ 0 đến 1 trong 0,8 giây |
| w3-animate-zoom | Hoạt ảnh một phần tử có kích thước từ 0 đến 100% |
| w3-animate-fade | Hoạt ảnh độ mờ của một phần tử từ 0 đến 1 và 1 thành 0 (mờ dần + mờ dần) |
| w3-quay | Quay một phần tử 360 độ |
Animate Top
Lớp w3-animate-top trang trình bày trong một phần tử từ trên cùng (từ -300px đến 0):
Thí dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animate Bottom
Lớp w3-animate-bottom trượt trong một phần tử từ dưới cùng (từ -300px đến 0):
Thí dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Hoạt ảnh trái
Lớp w3-animate-left trang trình bày trong một phần tử từ trái (-300px đến 0):
Thí dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animate Right
Lớp w3-animate-right trình chiếu trong một phần tử từ bên phải (-300px đến 0):
Thí dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fade in Elements
Lớp w3-animate-opacity làm động độ mờ của phần tử từ 0 đến 1 trong 0,8 giây.
Làm mờ một phần tử với lớp w3-animate-opacity :
Thí dụ
<div class="w3-animate-opacity">..</div>
Phóng to các phần tử
Lớp w3-animate-zoom tạo hoạt ảnh cho một phần tử có kích thước từ 0 đến 100%.
Phóng to một phần tử với lớp w3-animate-zoom :
Thí dụ
<div class="w3-animate-zoom">..</div>
Yếu tố quay
Lớp w3-spin quay một phần tử 360 độ:
Thí dụ
<div class="w3-spin">..</div>
Fading Infinite
Lớp w3-animate- fade sẽ làm mờ dần một phần tử cứ sau 10 giây (liên tục):
Animate Fade In and Out
Thí dụ
<div class="w3-animate-fading">..</div>
Làm mờ tất cả
Thí dụ
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">