Blog hướng dẫn, Học CSS, Học HTML
Hướng dẫn tạo hiệu ứng sóng chuyển động đơn giản với SVG và CSS
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/
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).
|
1 2 3 4 5 6 7 8 9 10 11 |
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="#bc312a0f" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="#bc312a24" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="#bc312a3d" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="#bc312a" /> </g> </svg> |
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:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.waves { position:relative; width: 100%; height:15vh; margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px; } .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height:40px; min-height:40px; } } |
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.
