• Login
  • Register
No Code Building
Advertisement
  • CONTACT
  • KIẾN THỨC WEBSITE
  • KINH DOANH
    • NÓN BẢO HIỂM
    • ĐỒNG HỒ TREO TƯỜNG
    • ĐỒNG HỒ CÔNG CỘNG
No Result
View All Result
No Code Building
  • CONTACT
  • KIẾN THỨC WEBSITE
  • KINH DOANH
    • NÓN BẢO HIỂM
    • ĐỒNG HỒ TREO TƯỜNG
    • ĐỒNG HỒ CÔNG CỘNG
No Result
View All Result
No Code Building
No Result
View All Result
Home Công nghệ

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

in Công nghệ, HTML & CSS, Hướng dẫn, Lập trình, Thủ thuật, Woocommerce, WordPress
0
Set đồ tập gym đẹp, thoáng mát và Hot girl tập gym
1.6k
SHARES
8.8k
VIEWS
Share on FacebookShare on Twitter

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.

Previous Post

Code tự động chọn khi sản phẩm chỉ có 1 biến thể

Next Post

Cung cấp túi vải không dệt in logo, túi vải canvas in logo theo yêu cầu trên toàn quốc

Related Posts

Code tự động chọn khi sản phẩm chỉ có 1 biến thể
Công nghệ

Code tự động chọn khi sản phẩm chỉ có 1 biến thể

by TRUNG NO CODE
30 Tháng Ba, 2021
Đoạn code truy cập vào Gmail và gửi email đến 1 địa chỉ có sẵn bất kỳ
Công nghệ

Đoạn code truy cập vào Gmail và gửi email đến 1 địa chỉ có sẵn bất kỳ

by TRUNG NO CODE
26 Tháng Ba, 2021
Hướng dẫn chỉnh font chữ mặc định trong CorelDraw
Thủ thuật

Hướng dẫn chỉnh font chữ mặc định trong CorelDraw

by TRUNG NO CODE
25 Tháng Ba, 2021
Hướng dẫn cách xem kênh Youtube nào nhiều sub nhất thế giới và Việt Nam?
Công nghệ

Hướng dẫn cách xem kênh Youtube nào nhiều sub nhất thế giới và Việt Nam?

by TRUNG NO CODE
21 Tháng Ba, 2021
Lưu ý ĐẶC BIỆT QUAN TRỌNG khi đặt quà tặng kỷ niệm 90 ngày thành lập Đoàn TNCS Hồ Chí Minh 26/3
Biểu trưng

Lưu ý ĐẶC BIỆT QUAN TRỌNG khi đặt quà tặng kỷ niệm 90 ngày thành lập Đoàn TNCS Hồ Chí Minh 26/3

by TRUNG NO CODE
13 Tháng Ba, 2021
Next Post
Cung cấp túi vải không dệt in logo, túi vải canvas in logo theo yêu cầu trên toàn quốc

Cung cấp túi vải không dệt in logo, túi vải canvas in logo theo yêu cầu trên toàn quốc

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Currently Playing

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

00:43:24

Recommended

Hướng dẫn Elementor cơ bản cho người mới

Hướng dẫn chỉnh Layout trong Elementor

4 Tháng Hai, 2021
Muốn thiết kế website cần những gì?

Muốn thiết kế website cần những gì?

4 Tháng Ba, 2021

Chuyên mục

  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Dịch vụ kỹ thuật
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • Quà tặng doanh nghiệp
  • SEO tốt
  • Thủ thuật
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Don't miss it

File thiết kế biểu trưng/logo 80 năm ngày thành lập Đội Thiếu niên Tiền phong Hồ Chí Minh (15/5/1941 -15/5/2021)
Cuộc sống

File thiết kế biểu trưng/logo 80 năm ngày thành lập Đội Thiếu niên Tiền phong Hồ Chí Minh (15/5/1941 -15/5/2021)

18 Tháng Tư, 2021
File thiết kế Vector Bộ nhận diện thương hiệu Hội Liên hiệp Phụ nữ Việt Nam
Cuộc sống

File thiết kế Vector Bộ nhận diện thương hiệu Hội Liên hiệp Phụ nữ Việt Nam

18 Tháng Tư, 2021
Cung cấp túi vải không dệt in logo, túi vải canvas in logo theo yêu cầu trên toàn quốc
Dịch vụ kỹ thuật

Cung cấp túi vải không dệt in logo, túi vải canvas in logo theo yêu cầu trên toàn quốc

14 Tháng Tư, 2021
Set đồ tập gym đẹp, thoáng mát và Hot girl tập gym
Công nghệ

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

4 Tháng Tư, 2021
Code tự động chọn khi sản phẩm chỉ có 1 biến thể
Công nghệ

Code tự động chọn khi sản phẩm chỉ có 1 biến thể

30 Tháng Ba, 2021
Top 100+ phim hoạt hình hay nhất mọi thời đại (phần 1)
Giải trí

Top 100+ phim hoạt hình hay nhất mọi thời đại (phần 1)

16 Tháng Tư, 2021

Thẻ

bàn bida hollywood 2021 chỉnh font mặc định trong corel code auto choose variable product code để khách gửi email bằng tài khoản gmail elementor elementor là gì hướng dẫn cách xem kênh youtube nào nhiều sub nhất hướng dẫn sử dụng elementor pro in nón bảo hiểm giá rẻ in nón bảo hiểm giá rẻ tphcm in nón bảo hiểm giá sỉ khuyến mãi kênh youtube nhiều sub nhất thế giới kênh youtube nhiều sub nhất việt nam mua elementor pro namesilo nocodebuilding nón bảo hiểm quà tặng qts1 quà tặng 90 năm thành lập đoàn quà tặng kỷ niệm 90 năm đoàn thanh niên quà tặng số 1 raya và rồng thần cuối cùng full sản xuất nón bảo hiểm chất lượng sản xuất đồng hồ treo tường theo yêu cầu theme builder thiết kế website thiết kế website không cần code thiết kế website wordpress top 100 phim hoạt hình hay nhất mọi thời đại tạo user mới trong wordpress tự động chọn biến thể vultr woocommerce xưởng sản xuất nón bảo hiểm xưởng sản xuất nón bảo hiểm giá rẻ đặt in nón bảo hiểm số lượng lớn đặt làm đồng hồ treo tường theo yêu cầu đặt nón bảo hiểm quà tặng đặt nón bảo hiểm theo yêu cầu đồng hồ công cộng đồng hồ công cộng uy tín đồng hồ treo tường cỡ lớn đồng hồ treo tường giá rẻ đồng hồ treo tường in logo giá rẻ
No Code Building

Giải pháp Marketing hiệu quả

Categories

  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Dịch vụ kỹ thuật
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • Quà tặng doanh nghiệp
  • SEO tốt
  • Thủ thuật
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Recent News

File thiết kế biểu trưng/logo 80 năm ngày thành lập Đội Thiếu niên Tiền phong Hồ Chí Minh (15/5/1941 -15/5/2021)

File thiết kế biểu trưng/logo 80 năm ngày thành lập Đội Thiếu niên Tiền phong Hồ Chí Minh (15/5/1941 -15/5/2021)

18 Tháng Tư, 2021
File thiết kế Vector Bộ nhận diện thương hiệu Hội Liên hiệp Phụ nữ Việt Nam

File thiết kế Vector Bộ nhận diện thương hiệu Hội Liên hiệp Phụ nữ Việt Nam

18 Tháng Tư, 2021

© 2021 No Code Building - Giải pháp Marketing hiệu quả

No Result
View All Result
  • CONTACT
  • KIẾN THỨC WEBSITE
  • KINH DOANH
    • NÓN BẢO HIỂM
    • ĐỒNG HỒ TREO TƯỜNG
    • ĐỒNG HỒ CÔNG CỘNG

© 2021 No Code Building - Giải pháp Marketing hiệu quả

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Gọi điện thoại
0989 333 069
Chat Zalo