Hướng dẫn tạo hiệu ứng rê chuột trong css mới nhất 2020

hiệu ứng rê chuột trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề hiệu ứng rê chuột trong css. Trong bài viết này, cachthietkeweb.vn sẽ viết bài Hướng dẫn tạo hiệu ứng rê chuột trong css mới nhất 2020.

Hướng dẫn tạo hiệu ứng rê chuột trong css mới nhất 2020

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

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. định hì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

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

người dùng có click thì việc giữ user trên trang mới được lâu hơn và dẫn theo phần trăm biến đổi sẽ cao hơn.

• xem thêm: dễ dàng Responsive bằng phương pháp sử dụng Css Variables

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

Vậy, hãy sử dụng cho họ thấy tham vọng. 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 click vào button dưới đây?

làm thế nào bạn sử dụng đượ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!

1. Hãy bắt đầu với việc dựng lại vị trí của con trỏ chuột

trước tiên việc chúng ta cần sử dụng 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`)
 

1. chọn phần tử và đợi cho đến khi user di chuột qua nó
2. Tính vị trí tương so với phần tử
3. Lưu các tọa độ trong các biến CSS

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

2. kích hoạt gradient

cho đến nay 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: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

 span 
    position: relative;
  

 &::before 
    --size: 0;

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

 &:hover::before 
    --size: 400px;
  

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

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

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

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

cần thiết là bạn nắm được hiệu ứng. Đặt nó vào đâu để làm user 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 web của bạn ngay hiện tại nào.

Nguồn: https://niithanoi.edu.vn/