Hướng dẫn blur css

Tạo Hiệu Ứng Hover Blur Cho Đường Dẫn

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 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

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ẻ!