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.