Hầu hết các trang web hiện đại đều sử dụng Cascading Style Sheets (CSS). Một số trang web sử dụng các tính năng CSS cơ bản trong khi những trang khác sử dụng các tính năng nâng cao để làm cho ứng dụng web của họ hấp dẫn hơn.
Việc thêm các hiệu ứng bắt mắt có thể cải thiện tỷ lệ nhấp vào trang web của bạn, thu hút người dùng hành động và thậm chí tăng thời gian người dùng dành cho trang web của bạn.
Trong bài viết này, chúng tôi sẽ thảo luận về hiệu ứng di chuột CSS là gì, chúng có thể làm cho trang web của bạn bắt mắt như thế nào, cách bạn có thể triển khai các hiệu ứng này và cũng cung cấp ví dụ về các trang web triển khai hiệu ứng di chuột CSS cổ điển.
Hiệu ứng di chuột CSS là gì?
Hiệu ứng di chuột CSS xảy ra khi khách truy cập trang web di con trỏ (con trỏ chuột) qua một phần tử. Kết quả có thể là sự thay đổi về màu sắc, văn bản hoặc các hiệu ứng động khác. Những hiệu ứng như vậy được thêm vào trang web để tăng tính tương tác và dễ điều hướng.
Hiệu ứng di chuột CSS có thể xuất hiện dưới dạng chuyển tiếp hoặc hoạt ảnh.
Chuyển tiếp
Những hiệu ứng như vậy cho phép bạn thay đổi giao diện hoặc hành vi của một thành phần trên trang web. Tuy nhiên, phải có một yếu tố kích hoạt, chẳng hạn như di chuột qua một phần tử cụ thể. Quá trình chuyển đổi sẽ chuyển từ trạng thái ban đầu sang trạng thái cuối cùng khi được kích hoạt. Quá trình chuyển đổi chỉ chạy một lần và không cho phép bạn chỉ định các điểm trung gian.
hoạt hình
Các hiệu ứng này có các khung hình chính cho phép chúng lặp lại ngược, lặp lại và chuyển từ trạng thái bắt đầu sang trạng thái kết thúc. Những hiệu ứng này cũng có trạng thái trung gian. Khung hình chính cho biết cách hiển thị các phần tử hoạt ảnh tại một điểm nhất định trong chuỗi hoạt ảnh.
Các loại hiệu ứng di chuột CSS
Hiệu ứng di chuột CSS có thể được áp dụng cho văn bản, hình ảnh, video, liên kết hoặc nút. Dưới đây là một số ứng dụng chính:
# 1. Hiệu ứng di chuột văn bản
Những hiệu ứng như vậy rất phù hợp khi bạn muốn xây dựng một trang web tối giản. Thiết kế phải đơn giản nhưng vẫn truyền tải được thông điệp. Nó có thể có các dạng sau:
- Hiệu ứng văn bản đầu cuối: Hiệu ứng này bắt chước việc gõ trên trình xử lý văn bản. Các từ sẽ nhấp nháy nhưng tốc độ phải đủ nhanh để người dùng có thể đọc được.
- Hoạt hình văn bản: Văn bản trong hiệu ứng này có thể di chuyển lên, xuống hoặc sang một bên.
#2. Liên kết hiệu ứng di chuột
Một trang web thông thường sẽ có các siêu liên kết khác nhau chuyển hướng người dùng đến các trang khác nhau. Ngày càng có nhiều liên kết như vậy khi trang web phát triển. Hiệu ứng di chuột có thể có các dạng sau;
- Thay đổi màu liên kết: Màu liên kết từ xanh sang đỏ.
- Thay đổi màu nền: Hiệu ứng này thay đổi màu nền của liên kết.
- Thay thế văn bản: Hiệu ứng này thay đổi nội dung của biểu tượng liên kết.
#3. Hiệu ứng di chuột qua nút
Các nút rất quan trọng trên các trang web vì chúng cho phép chúng ta gửi biểu mẫu và truy cập các phần khác nhau của trang web. Hiệu ứng di chuột qua nút có thể được thực hiện dưới dạng:
- Thay đổi màu văn bản: Màu văn bản trên nút “Nhấp vào tôi” có thể thay đổi từ màu đỏ sang màu xanh lục khi di chuột.
- Thay đổi màu nền: Các nút HTML mặc định trong suốt. Nhà phát triển có thể thêm màu nền cho các nút như vậy. Màu nền có thể thay đổi từ nâu sang xanh khi di chuột qua.
- Hiệu ứng thoát: Bạn có thể thêm sự hấp dẫn trực quan cho người dùng bằng cách thiết kế nút thoát khi di chuột.
#4. Hiệu ứng di chuột hình ảnh
- Hoán đổi hình ảnh: Bạn có thể tạo một băng chuyền hình ảnh có thể hoán đổi khi di chuột.
- Hình ảnh mờ dần/mờ dần: Hiệu ứng này làm cho hình ảnh trông rõ hơn khi bạn di chuột qua chúng.
Hoán đổi thử nghiệm: Việc tìm các trang web ẩn các mô tả khác nhau trong hình ảnh của chúng là điều rất phổ biến. Ví dụ: một trang web du lịch có thể hiển thị chi tiết khách sạn khi người dùng di chuột.
Bây giờ chúng tôi có thể giải thích một số hiệu ứng di chuột CSS cổ điển cho trang web của bạn.
Thay đổi màu nền khi di chuột
Bạn có thể áp dụng hiệu ứng này cho các nút, liên kết hoặc văn bản hiển thị trên trang web. Khi con trỏ chuột chạm vào mục tiêu, màu nền sẽ thay đổi.
Bạn có thể thay đổi nền của văn bản theo các bước sau;
- Sử dụng lớp giả :hover để đạt được mục tiêu của bạn
- Tạo một phần tử như div, nút hoặc liên kết nơi bạn sẽ triển khai hiệu ứng di chuột.
Đây là mã mẫu thực hiện các hiệu ứng này.
tập tin HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> Hover and see me change!!!!! </div </body> </html>
tập tin css
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}Trước khi di chuột sẽ xảy ra;
Khi di chuột, kết quả sẽ như sau;
Thay đổi màu liên kết khi di chuột
Liên kết là yếu tố quan trọng trên một trang web vì chúng giúp chúng ta điều hướng từ trang này sang trang khác. Chúng tôi sử dụng thẻ HTML để tạo siêu liên kết. Thay đổi màu của liên kết khi di chuột sẽ tăng khả năng hiển thị của liên kết.
Để chứng minh hiệu ứng này, chúng ta cần:
- Tạo thẻ chọn trên thẻ :head hoặc :body
- Xác định lớp giả :hover
Bạn có thể sử dụng mã mẫu này để hiển thị liên kết thay đổi từ màu xanh sang màu cam khi di chuột.
tập tin HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <a href="#">Hover over me and see the magic</a> </div </body> </html>
tập tin css:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}Đầu ra trước khi di chuột;
Thoát sau hiệu ứng di chuột;
Di chuyển điểm đánh dấu khi di chuột
Khi người dùng di chuột, hiệu ứng này sẽ thêm bóng khung vào liên kết nội tuyến. Màu sắc của liên kết sẽ được thay đổi trong quá trình này. Để đạt được điều này, bạn có thể làm theo các bước hướng dẫn sau;
- Thêm phần đệm xung quanh liên kết (đại loại như 00,25 rem)
- Thêm một lề có giá trị tương tự. Điều này ngăn phần đệm can thiệp vào luồng văn bản.
Bạn có thể có tệp này dưới dạng tệp HTML đơn giản:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <a href="#">newsblog.pl</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
Đây có thể là tệp CSS của bạn;
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}Trước hiệu ứng di chuột;
Sau hiệu ứng di chuột;
Gạch chân cầu vồng khi di chuột
Hiệu ứng này thêm gạch chân nhiều màu vào văn bản khi di chuột qua.
- Công dụng: một lớp giả gradient tuyến tính để tạo sự chuyển tiếp mượt mà giữa các màu khác nhau.
- Sử dụng lớp giả :hover để đạt được mục tiêu của bạn.
- Tạo phần tử liên kết nơi bạn sẽ triển khai hiệu ứng di chuột.
Đây là mã mẫu triển khai gạch chân cầu vồng khi di chuột:
tập tin HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <p>This is <a href="#">Rainbow</a> hover effect. </p> </div </body> </html>
tập tin css:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}Trước khi di chuột;
Sau khi lơ lửng;
Thay thế văn bản khi di chuột
Thay thế thử nghiệm là khi văn bản được thay thế bằng một đoạn nội dung hoặc văn bản khác khi người dùng di chuột qua mục tiêu. Một ví dụ điển hình là nơi một trang web có liên kết “bình luận”. Khi di chuột qua, văn bản liên kết có thể thay đổi thành “Nhận xét”.
Để thực hiện thay thế văn bản khi di chuột, bạn cần:
- ::trước và ::after Các phần tử giả – Tạo một phần tử riêng biệt để văn bản được thay thế khi di chuột.
- :hover Một phần tử giả thay đổi vị trí hoặc khả năng hiển thị của nội dung khi được di chuột qua
Đây là minh họa về cách thực hiện hiệu ứng này:
tập tin HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <button><span>99 comments</span></button> </body> </html>
tập tin css:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }Trước khi di chuột;
Sau khi lơ lửng;
Trang web có hiệu ứng di chuột tuyệt vời
Nếu bạn muốn mượn ý tưởng và tìm cảm hứng, đây là một số trang web bạn có thể tham khảo.
# 1. Tranh sơn dầu
Canva là một tên tuổi lớn trong thế giới thiết kế vì nó giúp những người không phải là nhà thiết kế tạo ra những thiết kế đẹp. Trang web này có hiệu ứng di chuột tuyệt vời, từ trang chủ đến trang sản phẩm. Tất cả bắt đầu với nền mờ tối trên trang chủ. Tuy nhiên, nền sẽ xóa khi di chuột và hình ảnh sẽ hiển thị. Hiệu ứng di chuột cũng xuất hiện khi chọn các mẫu dự án khác nhau.
#2. Căn nhà
Haus là một ví dụ tuyệt vời về một trang thực hiện gạch chân khi di chuột, thay thế văn bản khi di chuột và thay đổi màu nền khi di chuột.
#3. Công trình chính
Mainworks triển khai cả hoạt ảnh và chuyển tiếp cho các hiệu ứng di chuột của nó. Một số hiệu ứng đáng chú ý là thay thế văn bản khi di chuột, thay đổi màu văn bản và phóng to văn bản và hình ảnh khi di chuột.
Ứng dụng
Việc lựa chọn hiệu ứng di chuột cho trang web của bạn sẽ phụ thuộc vào loại trang web, kỹ năng, sở thích và sở thích của bạn. Một số trang web như nền tảng nghệ thuật và phiếu giảm giá có thể hoan nghênh các hiệu ứng di chuột siêu quyến rũ. Mặt khác, các trang web pháp lý và y tế có thể chọn hiệu ứng di chuột tối thiểu.
Vì vậy, bạn cần phải tìm ra những gì phù hợp với trang web của bạn. Tuy nhiên, hãy đảm bảo những hiệu ứng này phù hợp với màu sắc thương hiệu của bạn. Hãy xem các tài nguyên CSS tốt nhất của chúng tôi để trau dồi kỹ năng CSS của bạn.
