Cho dù bạn có thích hoạt ảnh CSS hay không, thì việc học cách làm việc với các biến đổi và chuyển tiếp CSS có thể giúp ích cho trải nghiệm người dùng tổng thể trên trang web của bạn
Hãy xem cách bắt đầu
biến đổi
Thuộc tính biến đổi trong CSS cung cấp cho bạn khả năng biến đổi các phần tử ở dạng 2D hoặc 3D. Các phép biến đổi phổ biến nhất được sử dụng để thay đổi các phần tử là
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
4, .skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
5, .skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
6 và .skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
7Quay
cú pháp
.rotate:hover {
transform: rotate[10deg];
/* transform: rotateY[90deg]; */
/* transform: rotateX[-90deg]; */
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Khi xoay một phần tử, bạn có thể xoay trên cả trục X và Y hoặc chỉ trục X hoặc Y. Bạn cũng có thể xoay độ dương hoặc độ âm
Nghiêng
cú pháp
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thuộc tính này làm lệch một phần tử trên mặt phẳng 2D
Có một tốc ký sử dụng một hoặc hai giá trị
Bạn cũng có thể ghi cụ thể nếu muốn xiên theo trục X hoặc Y
Thuộc tính skew nghiêng phần tử sang phải hoặc trái
Dịch
cú pháp
.translate:hover {
/* transform: translate[100px]; */
/* transform: translateX[100px]; */
transform: translateY[100px];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn muốn di chuyển một phần tử trên trang web, bạn sử dụng thuộc tính translate. Thuộc tính này di chuyển một phần tử sang trái và phải, lên và xuống hoặc cả hai
Ghi chú. nếu bạn muốn di chuyển một phần tử lên trên, bạn sử dụng số âm trên trục Y. Điều này có thể gây nhầm lẫn khi bạn lần đầu tiên bắt đầu tạo hoạt ảnh trên web
Tỉ lệ
cú pháp
.scale:hover {
/* transform: scale[1.2]; */
/* transform: scale[1.2, 0.5]; */
/* transform: scaleX[2]; */
transform: scaleY[0.5];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thuộc tính scale tăng hoặc giảm tỷ lệ phần tử tùy thuộc vào giá trị. Một giá trị lớn hơn một tỷ lệ phần tử lên. Một giá trị dưới đây quy mô nó xuống. Về mặt kỹ thuật, bạn có thể sử dụng số âm nhưng nó dẫn đến một số biến đổi kỳ lạ. Nó không chia tỷ lệ phần tử mà thực sự lật nó theo chiều dọc
chuyển tiếp
Tất cả các ví dụ trên cũng có thuộc tính chuyển đổi trên đó
Trong khi các phép biến đổi di chuyển hoặc thay đổi diện mạo của một phần tử, thì các hiệu ứng chuyển tiếp làm cho phần tử chuyển đổi trơn tru và dần dần từ trạng thái này sang trạng thái khác
Nếu không có thuộc tính chuyển đổi trong các ví dụ trên, các phép biến đổi mà tôi đã sử dụng sẽ nhanh chóng và đột ngột. Bạn có thể nhận xét thuộc tính chuyển tiếp trên phần tử img để xem ý tôi là gì
Thuộc tính chuyển đổi là thuộc tính tốc ký được sử dụng để biểu thị tối đa bốn thuộc tính tốc ký liên quan đến chuyển đổi
- chuyển đổi tài sản
- thời gian chuyển tiếp
- chức năng thời gian chuyển đổi
- độ trễ chuyển tiếp
thuộc tính chuyển tiếp
Thuộc tính này chỉ định tên hoặc tên của các thuộc tính CSS mà bạn cũng đang áp dụng quá trình chuyển đổi. Bạn cũng có thể sử dụng từ khóa
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
8 nếu bạn có nhiều thuộc tính mà phần chuyển đổi cũng sẽ được thêm vàoimg {
transition-property: transform;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
hoặc là
img {
transition-property: all;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
thời lượng chuyển tiếp
Thuộc tính này chỉ định khoảng thời gian mà quá trình chuyển đổi sẽ xảy ra
Vì vậy, nếu bạn chỉ định 1 giây [1 giây] thì quá trình chuyển đổi sang phần tử sẽ diễn ra trong hơn 1 giây
img {
transition-duration: 1s; /* seconds */
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
hoặc là
img {
transition-duration: 200ms; /* milliseconds */
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
chức năng chuyển đổi thời gian
Thuộc tính này có thể thay đổi rất nhiều giao diện hoạt hình của bạn. Nó áp dụng các tính năng tích hợp sẵn, chẳng hạn như tính năng dễ dàng hoặc bạn có thể xác định khối-bezier để dễ dàng tùy chỉnh hơn
Nếu bạn muốn chơi xung quanh với khối bezier
Bạn cũng có thể thử với nhiều tiện ích khác nhau trên MDN
img {
transition-timing-function: ease-in;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
img {
transition-timing-function: steps[6, end];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
độ trễ chuyển tiếp
Với thuộc tính này, bạn có thể chỉ định độ trễ giữa thời điểm thay đổi thuộc tính và quá trình chuyển đổi thực sự bắt đầu
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
hoặc là
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
chuyển đổi tay ngắn
Bạn có thể viết từng thuộc tính riêng lẻ như trên hoặc thay vào đó, bạn có thể sử dụng ký tự chuyển tiếp. Nó sẽ trông giống như thế này. Đầu tiên, xác định thuộc tính chuyển đổi, sau đó là thời lượng, chức năng định thời và cuối cùng là bất kỳ độ trễ nào bạn có thể muốn
.skew:hover{
transform: skew[-10deg]
/* transform: skew[-10deg, 20deg]; */
/* transform: skewX[-10deg]; */
/* transform: skewY[20deg]; */
}
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
kết hợp
Bạn có thể biến đổi từng thuộc tính riêng biệt hoặc bạn có thể tạo các hoạt ảnh thú vị hơn bằng cách kết hợp các thuộc tính biến đổi
Đây là một ví dụ trong đó tôi kết hợp tất cả các biến đổi cộng với chuyển đổi thành một hoạt ảnh duy nhất khi di chuột
Đối với các trang web của chúng tôi, bạn có thể kết hợp các thuộc tính này để tạo hoạt ảnh vui nhộn hoặc hướng sự chú ý của người dùng đến các khu vực cụ thể của trang web
Một trường hợp sử dụng phổ biến là thêm hiệu ứng di chuột vào một nút. Trong ví dụ này, tôi có một chuyển đổi trên nút và tôi đang kết hợp các chuyển đổi, dịch và chia tỷ lệ để thu hút sự chú ý nhiều hơn đến nút khi nó được di chuột qua