Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Hiệu Ứng Hover Cho Danh Sách Phần 2

Cách Tạo Hiệu Ứng Hover Cho Danh Sách Phần 2


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

Cách Tạo Hiệu Ứng Hover Cho Danh Sách Phần 2

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng hover cho danh sách(phần 2) bằng HTML, CSS và Javascript nhé!

Nếu bạn muốn tham khảo phần 1 thì có thể truy cập đường dẫn bên dưới nha!
Cách Tạo Hiệu Ứng Hover Cho Danh Sách

Tạo Cấu Trúc Phần Tử HTML Hiệu Ứng Hover

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 Google Font 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 Cho Danh Sách Phần 2</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML và CSS Cho Hiệu Ứng

Trong phần này chúng ta sẽ thêm các phần tử HTML cần thiết để tạo hiệu ứng này cho trang web thông qua đoạn mã bên dưới nhé:

HTML

<div class="danh_sach">
    <h1>Hiệu Ứng Hover Cho Danh Sách Phần 2</h1>
    <ul>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
        <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></li>
    </ul>
</div>

Bước tiếp theo chúng ta sẽ đi vào thiết lập vị trí, font chữ, màu sắc... cho nội dung của hiệu ứng này thông qua đoạn mã CSS bên dưới nha:

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1b2a49;
}
.danh_sach{
    position: relative;
}

Và kết quả bạn xem hình ảnh ở bên dưới nhé:

Hiệu Ứng Hover Danh Sách 1

Thiết Lập Style Cho Danh Sách

Trong Phần này chúng ta sẽ đi vào thiết lập style cho nội dung trong danh sách như thẻ ul, li, span... bằng đoạn mã CSS bên dưới nhé:

CSS

.danh_sach h1{
    position: relative;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
}
.danh_sach ul{
    position: relative;
}
.danh_sach ul li{
    position: relative;
    left: 0;
    color: #999;
    list-style: none;
    margin: 4px 0;
    border-left: 2px solid #bada55;
    transition: 0.5s;
    cursor: pointer;
}
.danh_sach ul li span{
    position: relative;
    padding: 8px;
    display: inline-block;
    z-index: 1;
    transition: 0.5s;
}
.danh_sach ul li::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #bada55;
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.5s;
}

Kết quả của đoạn mã trên bạn xem ở bên dưới nha:

Hiệu Ứng Hover Danh Sách 2

Tạo Hiệu Ứng Hover Cho Danh Sách

Phần cuối cùng chúng ta sẽ sử dụng thuộc tính transform: scaleX(0); trong li::before của đoạn mã trên để làm hiệu ứng hover cho danh sách. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

CSS

.danh_sach ul li:hover::before{
    transform: scaleX(1);
}
.danh_sach ul li:hover{
    left:10px;
}
.danh_sach ul li:hover span{
    color: #fff;
}

Và kết quả cuối cùng của hiệu này bạn xem video bên dưới nhé:

Và đây là dự án trên Codepen nhé: (Bạn phải chuyển sang chế độ screen 0.5x, 0.25x thì mới thấy rõ được hiệu ứng):

See the Pen Tạo Hiệu Ứng Hover Cho Danh Sách Phần 2 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 hiệu ứng hover cho danh sách 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ẻ!