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 Chuyển Động Cho Search Box

Tạo Hiệu Ứng Chuyển Động Cho Search Box


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

Tạo Hiệu Ứng Chuyển Động Cho Search Box

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng chuyển động (animation) cho search box(thanh tìm kiếm) bằng HTML và CSS nhé!

Tạo Cấu Trúc Phần Tử HTML Cho Search Box

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 và Font Awesome v4.7 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 animation button search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];600&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 Search Box

Phần tiếp theo chúng ta sẽ thêm các thẻ HTML cần thiết để tạo form tìm kiếm thông qua đoạn mã dưới đây nhé:

HTML

<!--- Bắt Đầu Component SearchBox-->
<form action="" class="search-box">
    <input type="text" name="" value="" placeholder="Tìm Kiếm">
    <button class="search-button" type="button" name="Tìm Kiếm">
        <i class="fa fa-search" aria-hidden="true"></i>
    </button>
</form>
<!--- Kết Thúc Component SearchBox-->

Và phần này chúng ta sẽ sử dụng các thuộc tính CSS để thiết lập vị trí, font chữ, màu nền, box-shadow... cho form tìm kiếm thông qua đoạn mã dưới đây nhé:

CSS

body{
    margin: 0;
    padding: 0;
    display: flex;
    height:100vh;
    font-family: 'Open Sans', sans-serif;
    justify-content: center;
    align-items: center;
    background: #bada55;
}
.search-box{
    position: absolute;
    background: #fff;
    height: 40px;
    padding: 10px;
    border-radius: 40px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
    0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}

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

Animation Search Box 1

Hiển Thị Ô Input Khi Hover Bằng CSS

Trong phần này chúng ta sẽ đi vào ẩn ô input trong form tìm kiếm và chỉ hiển thị khi người dùng hover vào icon tìm kiếm. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

CSS

/*Ẩn Ô Input*/
.search-box input{
    background: none;
    border: none;
    outline: none;
    float: left;
    padding: 0;
    font-size: 20px;
    line-height: 40px;
    width: 0px;
    transition: all 0.9s;
}
/*Hiển thị input khi người dùng hover vào search-box*/
.search-box:hover input{
    width: 240px;
    padding: 0 6px;
}
.search-box input:focus{
    width: 240px;
    padding: 0 6px;
}

Mình có một lưu ý là chúng ta sẽ ẩn ô input thông qua việc thiết lập độ rộng của nó bằng 0(width: 0px;). Và khi người dùng hover vào form tìm kiếm thì chúng ta sẽ thiết lập chiều dài mà mình mong muốn (với ví dụ trên là width: 240px;). Để hiểu rõ hơn bạn xem video sau nhé:

Thiết Kế Icon Cho Form Tìm Kiếm

Phần cuối cùng chúng ta sẽ đi vào thiết kế lại icon cho form tìm kiếm thông qua class search-button. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

CSS

.search-button{
    background: none;
    outline: none;
    border: none;
    width: 40px;
    margin-top: -21px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.search-button i {
    background: #1b2a49;
    z-index: 1;
    font-size: 30px;
    color: #fff;
    padding: 25px;
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07),
    0 32px 64px rgba(0,0,0,0.07);
}

Và kết quả cuối cùng bạn xem Codepen bên dưới nhé:

See the Pen Tạo Hiệu Ứng Chuyển Động Cho Search Box by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tìm hiểu thêm về các hiệu ứng chuyển động cho form search box thì có thể tham khảo đường dẫn bên dưới nha!
Những Search Component Đẹp Phần 2 Cho Trang Web (2020)

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 chuyển động cho ô search box 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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.