Hướng dẫn matrix css animation - hoạt ảnh ma trận css
Đã đăng vào thg 3 21, 2018 4:03 CH 1 phút đọc 1 phút đọc Bộ phim "The Matrix" là một bộ phim bom tấn của điện ảnh Mỹ, và điểm gây được ấn tượng với mình nhiều nhất là những màn hình xanh đầy dãy số và ký tự đủ kiểu chạy tít mù trong màn hình cổ lỗ sĩ. Và mình thích nó, nay mình sẽ giới thiệu cách tạo một màn hình matrix như vậy bằng css3 và sức mạnh của animation. Phân tích
MarkupVí dụ: 0Ví dụ đây là 1 đoạn text với random character, mình sẽ import katakana font vào thì chuỗi string này sẽ thành chữ nhật, nhìn cho nó nguy hiểm. ở đây có 3 class 1:
CSSImport fontface
Global setting
**Animation **
Apply animation
Setting cho text, thực tế sẽ có nhiều hơn rất nhiều:
Kết quả: All rights reserved
Định nghĩa và sử dụngThuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ... Thuộc tính của transform trong css3:
Ví dụHTML viết:
CSS viết:p { background: #cc0000; height: 50px; width: 80px; } Hiển thị trình duyệt khi chưa có transform:Thêm thuộc tính transform vào CSS:p { background: #cc0000; height: 50px; width: 80px; transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); } Hiển thị trình duyệt khi có transform: |