Ảnh động W3.CSS
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 | Định nghĩa |
---|---|
w3-animate-top | Trượt trong một phần tử từ trên xuống (-300px đến 0) |
w3-animate-đáy | Trượt trong một phần tử từ dưới lên (-300px đến 0) |
w3-animate-trái | Trượt trong một phần tử từ bên trái (-300px đến 0) |
w3-animate-phải | Trượt trong một phần tử từ bên phải (-300px đến 0) |
w3-animate-độ mờ | Tạo hiệu ứng độ mờ của một phần tử từ 0 lên 1 trong 0,8 giây |
w3-animate-zoom | Tạo hoạt ảnh cho một phần tử có kích thước từ 0 đến 100% |
w3-animate-fading | Tạo hoạt ảnh cho độ mờ của một phần tử từ 0 đến 1 và 1 đến 0 (làm mờ dần + mờ dần) |
quay-w3 | Xoay một phần tử 360 độ |
Hoạt hình hàng đầu
Lớp w3-animate-top trượt trong một phần tử từ trên xuống (từ -300px đến 0):
Ví dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Hãy tự mình thử » Hoạt hình dưới cùng
Lớp w3-animate-bottom trượt trong một phần tử từ dưới lên (từ -300px đến 0):
Ví dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Hãy tự mình thử »Hoạt hình trái
Lớp w3-animate-left trượt trong một phần tử từ trái (-300px đến 0):
Ví dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Hãy tự mình thử »Hoạt hình ngay
Lớp w3-animate-right trượt trong một phần tử từ bên phải (-300px đến 0):
Ví dụ
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Hãy tự mình thử »Làm mờ dần các yếu tố
Lớp w3-animate-opacity tạo hoạt ảnh cho độ mờ của một phần tử từ 0 đến 1 trong 0,8 giây.
Làm mờ dần trong một phần tử với lớp w3-animate-opacity :
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 :
Yếu tố quay
Lớp w3-spin quay một phần tử 360 độ:
Mờ dần vô hạn
Lớp w3-animate-fading mờ dần trong và ngoài một phần tử cứ sau 10 giây (liên tục):
Hoạt hình mờ dần trong và ngoài
Làm mờ tất cả
Ví 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">
Hãy tự mình thử »