Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Hover Blur Cho Đường Dẫn

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


Ngày 8 Tháng 10 Năm 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Hiệu Ứng Hover Blur</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;1,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</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

<ul>
    <li><a href="#">Trang Chủ</a></li>
    <li><a href="#">Về Chúng Tôi</a></li>
    <li><a href="#">Dịch Vụ</a></li>
    <li><a href="#">Bài Viết</a></li>
    <li><a href="#">Liên Hệ</a></li>
</ul>

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

Hiệu Ứng Hover Blur Link 1

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

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

Load WooCommerce Stores in 249ms!