CSS tạo hiệu ứng khi hover vào sản phẩm

Bạn muốn tạo hiệu ứng khi hover vào sản phẩm khi thiết kế website? Trong video này, mình sẽ hướng dẫn các bạn cách để code CSS tạo hiệu ứng nhé. Nào, bắt đầu!

Mình sẽ trình bày theo thứ tự sau:

Đoạn code mẫu và giải thích đoạn code mẫu
Giới thiệu một số hiệu ứng
Video hướng dẫn thao tác thực tế

Đoạn code CSS để xác định các thông số của hiệu ứng:

.ten-class-hieu-ung{
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;
}
.ten-class-hieu-ung:hover{
transform: translateY(-20px);
}

Tấm hình phía dưới mình đã sử dụng đoạn CSS vừa nêu, đặt tên class là .ten-class-hieu-ung . Mời bạn hover (di chuyện vào ảnh) để nhìn hiệu ứng của ảnh.

Như vậy, để tạo hiệu ứng khi hover vào sản phẩm/thành phần nào đó, bạn cần đoạn CSS gồm 2 thành phần:

Phần 1 là đoạn CSS quy định các thông số của hiệu ứng gồm transition-duration, transition-property và transition-timing-function.
Phần 2 là đoạn CSS quy định kiểu hiệu ứng. Trong ví dụ là transform:translateY(-20px).

Trong đó:

ten-class: tên class mà bạn muốn thực hiện hiệu ứng
transition-duration: thời gian diễn ra hiệu ứng
transition-property: loại hiệu ứng
transition-timing-function: quá trình diễn ra hiệu ứng nhanh hay chậm vào từng thời điểm
hover: khi di chuột vào là class thì hiệu ứng xảy ra
transform: translateY(-20px) : thay đổi vị trí theo chiều Y, class sẽ di chuyển lên trên 8px so với trước khi hover

Một số hiệu ứng transition và transform trong CSS

Bạn có thể sử dụng cấu trúc trên và thay đổi các thông số transition và các kiểu transform như bạn muốn.

Những thông số của transition-timing-function:

ease – mặc đinh, bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm
linear – tốc độ không thay đổi
ease-in – bắt đầu chậm
ease-out – kết thúc chậm
ease-in-out – bắt đầu và kết thúc chậm, ở giữa bình thường
cubic-bezier(n,n,n,n) – dạng biến thiên theo hàm cubic (loại này hơi phức tạp)

Những thông số của transform 2D:

translate(): thay đổi vị trí, mặc định là 2 thông số X và Y, bạn có thể thêm X hoặc Y để chỉ thay đổi 1 thông số
rotate(): xoay
scaleX(): phóng to hoặc thu nhỏ
scaleY()
scale()
skewX()
skewY()
skew(): làm nghiêng
matrix(): Phương thức ma trận () kết hợp tất cả các phương thức biến đổi 2D thành một. Phương thức matrix () nhận sáu tham số, chứa các hàm toán học, cho phép bạn xoay, chia tỷ lệ, di chuyển (dịch) và xiên các phần tử. Cấu trúc sẽ là: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Tham khảo

Bài viết đầy đủ về transition trên W3School tại đây.

Bài viết đầy đủ về transform 2D trên W3School tại đây.