Chatbox
Các bạn vui lòng dùng từ ngữ lịch sự và có văn hóa,sử dụng Tiếng Việt có dấu chuẩn. Chúc các bạn vui vẻ!
20/09/2021 16:09 # 1
buiducduong
Cấp độ: 22 - Kỹ năng: 1

Kinh nghiệm: 17/220 (8%)
Kĩ năng: 0/10 (0%)
Ngày gia nhập: 25/09/2020
Bài gởi: 2327
Được cảm ơn: 0
Cách Tạo Header Wave Bằng HTML CSS

I. Giới thiệu

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo header wave bằng HTML, CSS và Javascript nhé!

II. Tạo Header Wave

1. Tạo Cấu Trúc Phần Tử HTML Cho Header Wave

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 Header Gợn Sóng</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
 </body>
 </html>

2. Thêm Các Phần Tử HTML và CSS Cho Header Wave

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

HTML

<div class="container">
    <!-- Bắt Đầu Nội Dung Cho Header-->
    <div class="content">
        <div class="title">Header Gợn Sóng Bằng HTML CSS</div>
        <div class="text">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis possimus quaerat dolore quidem!
            Eligendi exercitationem voluptate sequi excepturi nihil alias, eveniet sed vero numquam porro adipisci eum,veniam odio enim?
        </div>
    </div>
    <!--Kết Thúc Nội Dung Cho Header-->

    <!-- Bắt Đầu Footer Cho Header-->
    <div class="footer">
        <a href="" class="button">Niềm Vui Lập Trình</a>
    </div>
    <!-- Kết Thúc Footer Cho Header-->

    <!-- Bắt Đầu  Hiệu Ứng Gợn Sóng-->
    <div class="wave"></div>
    <div class="wave wave2"></div>
    <div class="wave wave3"></div>
    <!-- Kết Thúc Hiệu Ứng Gợn Sóng-->
</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 header wave thông qua đoạn mã CSS bên dưới nha:

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    text-align: center;
    line-height: 1.4;
    width: 100%;
}
.container{
    height: 100vh;
}
.content{
    color: #000;
    padding: 0 2rem;
}

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

 

3. Thiết Lập Style Cho Nội Dung Trong Header Wave

Tiếp theo chúng ta sẽ sử dụng CSS để thiết kế lại nội dung trong phần header và đặt trước các hiệu ứng chuyển động animation vào trong các phần tử (phần sau chúng ta sẽ tạo các hiệu ứng này nhé) thông qua thuộc tính animation của CSS. Để hiểu rõ hơn bạn xem đoạn mã sau nha:

CSS

.content{
     color: #000;
     padding: 0 2rem;
 }
.container, .content, .footer{
     display: flex;
     align-items: center;
     justify-content: center;
 }
.content, .footer{
     width: 100%;
     position: relative;
     z-index: 10;
 }
.container, .content{
     flex-direction: column;
 }
.footer{
     flex-wrap: wrap;
     max-width: 600px;
     animation: hieu_ung_wave 0.5s 0.5s forwards;
 }
.footer a{
     text-decoration: none;
     max-width: 40%;
     padding: 12px 18px;
     margin: 20px auto 0 auto;
     cursor: pointer;
     color: #000;
     border: 2px solid;
     outline: none;
     transition: all 0.3s;
     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);
 }
.footer a:hover{
     background-color: #fff;
     color: #222;
     background-color: #fff;
      }
.text, .title{
     backface-visibility: hidden;
 }
.title{
     font-size: 6rem;
     font-weight: 500;
     animation: hieu_ung_wave 0.5s fowards;
     color: #000;
 }
.text{
     max-width: 50rem;
     font-weight: 500;
     font-size: 1.4rem;
     padding: 2rem 0;
     color: #000;
     animation: hieu_ung_wave 0.5s 0.3s fowards;
 }

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

 

4. Thiết Lập Hiệu Ứng Chuyển Động Gợn Sóng Cho Header

Phần đầu tiên chúng ta sẽ dùng các thuộc tính cơ bản CSS để thiết lập style cho các phần tử HTML của hiệu ứng gợn sóng ( class .wave, class .wave2, class .wave3) thông qua đoạn mã dưới đây nhé:

CSS

.wave{
    opacity: 0.6;
    position: absolute;
    bottom: 40%;
    left: 50%;
    width: 6000px;
    height: 6000px;
    background: #000;
    margin-left: -3000px;
    transform-origin: 50% 48%;
    border-radius: 46%;
    animation: wave 12s infinite linear;
    pointer-events: none;
}
.wave2{
    animation: wave 28s infinite linear;
    opacity: 0.3;
}
.wave3{
    animation: wave 20s infinite linear;
    opacity: 1;
}
.wave{
    background: #000;
}
.container{
    position: relative;
    background-color: #2389da;
    z-index: 9;
}

Phần tiếp theo chúng ta sẽ đi vào sử dụng @keyframes để tạo hiệu ứng chuyển động cho hai thành phần chúng ta đã đặt tên trước đó là hieu_ung_wave và wave. Để nắm rõ hơn bạn xem đoạn mã sau nhé: CSS

@keyframes hieu_ung_wave{
    from{
        transform: translateY(2rem);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes wave{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.text{
    color: #fff;
}
.footer a{
    color: #fff;
}
.title{
    color: #fff;
}

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

 

 

III. 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 gợn sóng cho hearder hữu ích dành cho việc phát triển. Chúc bạn có một ngày vui vẻ!
 
Copyright© Đại học Duy Tân 2010 - 2024