Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng hover blur cho đường dẫn bằng HTML CSS nhé!Tạo Hiệu Ứng Hover Blur Cho Đường Dẫn
Tạo Cấu Trúc Phần Tử HTML
Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html
[nơi lưu trữ HTML] và style.css
[nơi lưu trữ mã CSS]. Sau đó liên kết chúng với nhau thông qua đoạn mã dưới đây nhé:
HTML
Tạo Hiệu Ứng Hover Blur
Thêm Các Phần Tử HTML Cần Thiết
Trong phần này chúng ta sẽ đi vào tạo ra các thành phần HTML cho thanh tiêu đề[nơi chứa các đường dẫn] thông qua đoạn mã sau nhé:
HTML
- Trang Chủ
- Về Chúng Tôi
- Dịch Vụ
- Bài Viết
- Liên Hệ
Thiết Lập Vị Trí Cho Đường Dẫn Bằng CSS
Phần tiếp theo chúng ta sẽ đi vào sử dụng CSS để thiết lập vị trí, font chữ, kích thước, màu sắc... cho đường dẫn thông qua đoạn mã sau nhé:
CSS
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #1b2a49;
}
ul{
margin: 0;
padding: 0;
display: flex;
}
ul li{
list-style: none;
margin: 0 20px;
transition: 0.5s;
}
ul li a{
display: block;
position: relative;
text-decoration: none;
padding: 5px;
font-size: 18px;
color: #fff;
text-transform: uppercase;
transition: 0.5s;
}
Và kết quả bạn xem ở hình bên dưới nhé:
Tạo Hiệu Ứng Hover Blur Bằng CSS
Bước cuối cùng chúng ta sẽ thiết lập hiệu ứng hover blur cho đường dẫn thông qua đoạn mã sau nhé:
CSS
ul:hover li a{
transform: scale[1.5s];
opacity: 0.2;
filter: blur[5px];
}
ul li a:hover{
transform: scale[2];
opacity: 1;
filter: blur[0];
}
ul li a:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #bada55;
transition: transform 0.5s;
transform-origin: right;
transform: scale[0];
z-index: -1;
}
ul li a:hover:before{
transition: transform 0.5s;
transform-origin: left;
transform: scaleX[1];
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé:
See the Pen Hieu Ung Hover Blur Cho Đường Dẫn by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Nếu bạn muốn tham khảo thêm về các hiệu ứng đường dẫn thì truy cập đường dẫn bên dưới nha.
26 Hiệu Ứng Hover CSS Đẹp Cho Đường Dẫn
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo hover blur link hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!