Tạo hiệu ứng di chuột (hover) thú vị bằng CSS

Trong thiết kế website hay lập trình website thì việc thiết kế làm thế nào để thu hút người dùng bấm vào các nút (button) điều hướng là rất quan trọng.

Hôm nay mình sẽ hướng dẫn bạn tạo hiệu ứng rê chuột (hover css) thú vị trong CSS với 3 bước:

1. Xác định vị trí con chuột

2. Kích hoạt Gradient

3. Kết quả đạt được sau khi tạo hiệu ứng rê chuột bằng css

Bạn đang đọc: Tạo hiệu ứng di chuột (hover) thú vị bằng CSS

Hiệu ứng rê chuột trong CSS

Người dùng có bấm thì việc giữ người dùng trên trang mới được lâu hơn và kéo theo tỷ lệ chuyển đổi sẽ cao hơn.

Theo nghiên cứu thì con người sẽ dễ dàng bị tác động khi cảm xúc đang dâng cao.

Vậy, hãy làm cho họ thấy thích thú. Nâng cảm xúc, năng lượng của họ lên để có được tỷ lệ chuyển đổi cao.

Hãy cùng bắt đầu với các button, bạn có muốn bấm vào button dưới đây?

Làm thế nào bạn làm được tương tự để cho trang web của bạn nổi bật như? Nó không khó như bạn nghĩ đâu!

Tóm Tắt

1. Hãy bắt đầu với việc xác định vị trí của con trỏ chuột

Đầu tiên việc chúng ta cần làm là theo dõi vị trí con chuột:

document. querySelector ( '. button ' ). onmousemove = ( e ) => {

const x = e. pageX - e.target. offsetLeft const y = e. pageY - e.target. offsetTop

e.target.style. setProperty ( ' -- x ', ` $ { x } px ` ) e.target.style. setProperty ( ' -- y ', ` $ { y } px ` ) }

Chọn thành phần và đợi cho đến khi người dùng di chuột qua nó
Tính vị trí tương đối với thành phần
Lưu những tọa độ trong những biến CSS

Vâng, chỉ có 9 dòng code để cho CSS của bạn định vị con chuột của người dùng. Số lượng hiệu ứng bạn có thể đạt được với thông tin này là rất lớn. Nhưng chúng ta hãy hoàn thành CSS đầu tiên …

2. Kích hoạt gradient

Bây giờ chúng ta có tọa độ được lưu trữ trong các biến CSS và chúng ta có thể sử dụng chúng ở khắp mọi nơi trong CSS của chúng ta.

. button { position : relative ; appearance : none ; background : # f72359 ; padding : 1 em 2 em ; border : none ; color : white ; font-size : 1.2 em ; cursor : pointer ; outline : none ; overflow : hidden ; border-radius : 100 px ;

span { position : relative ; }

và :: before { -- size : 0 ;

content : ' ' ; position : absolute ; left : var ( -- x ) ; top : var ( -- y ) ; width : var ( -- size ) ; height : var ( -- size ) ; background : radial-gradient ( circle closest-side, # 4405 f7, transparent ) ; transform : translate ( - 50 %, - 50 % ) ; transition : width. 2 s ease, height. 2 s ease ; }

  &:hover::before {
    --size: 400px;
  }
}
Xem thêm: Font trong CSS

Bao quanh đoạn văn bản bằng 1 khoảng chừng để tránh gardient Open bên trên nó .
Bắt đầu với width và height là 0 px và tăng đến 400 px khi người dùng di chuột qua button .
Đừng quên thiết lập transition : width. 2 s ease, height. 2 s ease ; để cho nó Open thật mềm mại và mượt mà .
Sử dụng tọa độ để follow con chuột
Áp dụng một radial-gradient vào nền và sử dụng giá trị circle ( hiệu ứng gradient tròn ). Closest-side để lấp đầy before mà không vượt qua nó .

Hãy tự tay thử nghiệm và thay đổi các giá trị để hiểu tại sao nó hoạt động.

3. Và đây là kết quả sau khi tạo hiệu ứng rê chuột trong CSS.

See the Pen và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; a data-cke-saved-href = ‘ https://codepen.io/vikhanhkhanh/pen/RywbjX/ ‘ href = ‘ https://codepen.io/vikhanhkhanh/pen/RywbjX/ ‘ rel = ” nofollow ” và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; Mouse movement button with border-radius và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; / a và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; by vikhanh ( và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; a data-cke-saved-href = ‘ https://codepen.io/vikhanhkhanh ‘ href = ‘ https://codepen.io/vikhanhkhanh ‘ rel = ” nofollow ” và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; @ vikhanhkhanh và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; / a và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; ) on và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; a data-cke-saved-href = ‘ https://codepen.io ‘ href = ‘ https://codepen.io ‘ rel = ” nofollow ” và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; CodePen và amp ; amp ; amp ; amp ; amp ; amp ; amp ; lt ; / a và amp ; amp ; amp ; amp ; amp ; amp ; amp ; gt ; .

Hiệu ứng rê chuột này cũng không quá khó phải không nào. Bạn có thể thay đổi gradient để phù hợp với màu sắc trang web của mình.

Quan trọng là bạn nắm được hiệu ứng. Đặt nó vào đâu để làm người dùng thích thú là việc của bạn. Hãy tạo hiệu ứng rê chuột trong CSS tuyệt vời với biến CSS cho trang web của bạn ngay bây giờ nào.

> Đừng quên, tất cả những kiến thức này cũng sẽ dược dạy trong khóa học LẬP TRÌNH PHP hoặc LẬP TRÌNH JAVA WEB tại NIIT - ICT Hà Nội.

—

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, Thành Phố Hà Nội

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

Xem thêm: ExpressJS là gì? Tại sao nên sử dụng ExpressJS?

# niit # icthanoi # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com