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

Đóng góp bởi: Đinh Văn Tuấn Anh 232 lượt xem Đăng ngày 08/06/2023

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

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
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 – 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.

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 *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb