Đã đă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
- Đầu tiên background màu đen
- Tiếp theo là các dòng chữ màu xanh bố trí ở các vị trí khác nhau và độ dài cũng khác nhau, cho nó đa dạng
color: rgb[0, 255, 0];
- Tiếp theo là animation, có 2 loai chính như sau:
- Text đổ từ trên top xuống bottom, --> text transform rotate 90deg là ok
- text sáng và mờ dần khi gần về bottom --> text opacity từ 1 -> 0 là ok
- Các animation là infinite
Markup
Ví dụ:
@font-face {
font-family: Katakana;
src: url['//s.cdpn.io/26175/MoonBeams-katakana_.TTF'];
}
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
@font-face {
font-family: Katakana;
src: url['//s.cdpn.io/26175/MoonBeams-katakana_.TTF'];
}
1:* d* -> định nghĩa cho duration của cái text đó, nghĩa là nó chạy nhanh hay chậm, từ rõ -> mờ dần, phụ thuộc vào cái thời gian này
* c* -> định nghĩa màu text khi khởi tạo
* de* -> thời gian delay khi animation khởi tạo, thực ra cũng ko cần lắm, do là mỗi một thằng text chạy sẽ có một duration khác nhau rồi.
CSS
Import fontface
@font-face {
font-family: Katakana;
src: url['//s.cdpn.io/26175/MoonBeams-katakana_.TTF'];
}
Global setting
#matrix{
margin: 1em auto;
font-family: Katakana;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
background-image: -webkit-gradient[linear, 0% 90%, 0% 100%, from[rgba[0, 255, 0, 0]], to[rgba[0, 255, 0, 0.1]]];
color: rgba[0, 255, 0, .7];
text-shadow: rgba[255, 255, 255, .8] 0px 0px 4px;
position: relative;
}
**Animation **
@-webkit-keyframes fade{
0% { opacity: 1; }
100% { opacity: 0; }
}
// Cái này là mờ dần
@-webkit-keyframes fall{
from {top: -250px;}
to {top: 300px;}
}
// Cái này là đổ từ trên xuống, ở đây là text đổ từ trên xuống, có thể dùng cái này làm hiệu ứng lá rơi này
Apply animation
#matrix div{
position: absolute;
top: 0;
transform-origin: 0%;
transform: rotate[90deg];
/* animation */
animation-name: fall, fade;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: ease-out;
}
Setting cho text, thực tế sẽ có nhiều hơn rất nhiều:
.f1{
font-size: 1.2em;
}
.c1{
color: rgba[0, 255, 0, .5];
}
.d1{
-webkit-animation-duration: 4s;
}
Kết quả:
All rights reserved
- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính transform
Định nghĩa và sử dụng
Thuộ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:
transform | none | Xác định rằng không có chuyển đổi | |
matrix[n,n,n,n,n,n] | Định nghĩa một biến đổi 2D, bằng cách sử dụng một ma trận với 6 giá trị | ||
matrix3d[n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n] | Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận 4x4 với 16 giá trị | ||
perspective[n] | Định nghĩa một biến đổi 3D dưới dạng phối cảnh. | ||
rotate[góc] | Định nghĩa một phép quay 2D với góc được xác định bởi tham số. | ||
rotate3d[x,y,z,angle] | Định nghĩa một phép quay 3D được xác định bởi các tham số. | ||
rotateX[angle] | Định nghĩa một phép quay 3D dọc theo trục X. | ||
rotateY[angle] | Định nghĩa một phép quay 3D dọc theo trục Y. | ||
rotateZ[angle] | Định nghĩa một phép quay 3D dọc theo trục Z. | ||
scale[x,y] | Xác định một biến đổi tỷ lệ, 2D. | ||
scale3d[x,y,z] | Xác định một biến đổi tỷ lệ, 3D. | ||
scaleX[x] | Xác định một biến đổi tỷ lệ theo trục X. | ||
scaleY[y] | Xác định một biến đổi tỷ lệ theo trục Y. | ||
scaleZ[z] | Xác định một biến đổi tỷ lệ theo trục Z. | ||
skew[x-angle,y-angle] | Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y. | ||
skewX[angle] | Xác định sự biến đổi nghiêng 2D dọc theo trục X. | ||
skewY[angle] | Xác định sự biến đổi nghiêng 2D dọc theo trục Y. | ||
translate[x,y] | Xác định một dịch chuyển 2D. | ||
translate3d[x,y,z] | Xác định một dịch chuyển 3D. | ||
translateX[x] | Xác định một dịch chuyển 2D theo trục X. | ||
translateY[y] | Xác định một dịch chuyển 2D theo trục Y. | ||
translateZ[z] | Xác định một dịch chuyển 2D theo trục Z. | ||
transform-origin | Giá trị trục X | Xác định nơi nhìn thấy được đặt tại trục X, giá trị có thể: left, right, center, chiều dài, %. | |
Giá trị trục Y | Xác định nơi nhìn thấy được đặt tại trục Y, giá trị có thể: left, right, center, chiều dài, %. | ||
Giá trị trục Z | Xác định nơi nhìn thấy được đặt tại trục Z, giá trị có thể: chiều dài. | ||
transform-style | preserve-3d | Các thành phần bên trong sẽ giữ vị trí 3D của nó. | |
flat | Các thành phần bên trong sẽ không giữ vị trí 3D của nó. |
Ví dụ
HTML viết:
transform
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]; }