Hướng dẫn tạo hiệu ứng sóng chuyển động đơn giản với SVG và CSS

7134 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, trong quá trình làm website chắc chắn nhiều khi chúng ta muốn tạo những dải sóng màu chuyển động để làm tăng thêm độ chuyên nghiệp cho website phải không? Hôm nay chúng ta cùng tìm hiểu nhé!

Trước hết, mời bạn cùng xem demo (phần footer) ở link này: https://edu2.ninhbinhweb.site/

Giuseart.com - Tạo sóng chuyển động bằng SVG và CSS
Giuseart.com – Tạo sóng chuyển động bằng SVG và CSS

Trong hướng dẫn này, bạn sẽ học cách sử dụng SVG và CSS để tạo kiểu sóng hoạt hình siêu mượt mà có thể được sử dụng làm nền để làm cho trang web của bạn trông tuyệt vời. Bắt đầu nào.

Bài viết thực hiện trên theme Flatsome, các theme khác có thể làm tương tự.

Thường thì khi tạo sóng kiểu này, phần chân sóng màu gì thì nó sẽ phải tiếp giáp với một section cùng màu của chân sóng để tạo hiệu ứng liền mạch. Như trong ví dụ mình gửi thì chân sóng màu đỏ đô sẽ tiếp giáp với phần footer có màu đỏ đô. Các bạn làm cho những vị trí khác có thể tự tùy biến theo ý thích nhé!

Bước 1: Chèn element HTML chứa phần tử SVG cho sóng

Trong theme Flatsome, mở trình dựng trang kéo thả UX builder, các bạn thực hiện thêm element “HTML” và paste code bên dưới vào nhé nhé! Lưu ý: Chèn element “HTML” ở cấp ngoài cùng thì sóng sẽ full width nhé! (không chèn vào trong row hoặc column).

Chèn HTML chứa phần tử SVG tạo sóng
Chèn HTML chứa phần tử SVG tạo sóng
Paste xong code SVG thì các bạn thực hiện lưu lại.

Trong đó, các bạn thực hiện thay mã màu nền của các lớp sóng ở code trên như hướng dẫn sau:

Giuseart.com---Tạo-sóng-chuyển-động-bằng-svg-và-css
Giuseart.com – Thay mã màu nền các lớp sóng

Bước 2: Thêm CSS cho sóng

Copy và paste đoạn code CSS dưới vào: Giao diện – tùy biến – Style – Custom CSS

Bước 3: Lưu lại và xem thành quả

Các bạn lưu lại CSS xong là ra ngoài sẽ thấy thành quả luôn, chỉ cần sửa mã màu đúng và copy đúng CSS là ok. Chúc các bạn thành công.

4.2/5 - (5 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận