Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những hiệu ứng animation svg text giúp cho trang web có thiết kế đẹp và bắt mắt hơn nhé!
SVG Là Gì?
Trước khi đi vào ví dụ thì mình xin giới thiệu qua một chút về SVG nha!
SVG là cụm từ viết tắt của Scalable Vector Graphics, nó sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector. Bạn có thể nhúng trực tiếp vào file HTML để sử dụng bằng việc dùng thẻ <svg>. Một số lợi ích khi sử dụng SVG trong trang web là:
- Kích thước nhỏ, khả năng nén tốt.
- Dễ dàng hiển thị trên nhiều màn hình thiết bị mà không bị vỡ hình ảnh.
- Dễ dàng mở rộng và chỉnh sửa.
- Tốc độ tải trang sẽ nhanh hơn so cới các loại định dạng hình ảnh khác(JPG, GIF, PNG...)
Nếu bạn muốn tham khảo thêm các bài viết hướng dẫn sử dụng SVG thì có thể xem ở bên dưới nhé:
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Thiết Kế SVG Text Mask HTML CSS
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.
Cách Tạo SVG Text Animation Javascript
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG text animation by Cassie Evans (@cassie-codes) on CodePen.
Tạo SVG Text Animation Bằng Animaejs
Và bên dưới là dự án trên Codepen nhé!
See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.
Thiết Kế SVG CSS
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Text Portrait by Lisi (@lisilinhart) on CodePen.
Cách Tạo SVG Text Animation Bằng CSS
Và bên dưới là dự án trên Codepen nhé!
See the Pen CSS3 - SVG Text Animation by HIPE (@hipe) on CodePen.
Thiết Kế SVG Text Gradient Animation CSS
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG text with animated gradient fill by Brad Daily (@bradleyboy) on CodePen.
Thiết Kế SVG Text Animation JS
Và bên dưới là dự án trên Codepen nhé!
See the Pen Curved SVG Text by GRAY GHOST (@grayghostvisuals) on CodePen.
Cách Tạo Hiệu Ứng Chuyển Động SVG Text Javascript
Và bên dưới là dự án trên Codepen nhé!
See the Pen Animating SVG Text by Omar Elbaga (@omarel) on CodePen.
Thiết Kế SVG Text Border Animation
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Text by ANA MAFLA (@ANAMAFLA) on CodePen.
Cách Tạo SVG Text Animation Bằng CSS
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Text Animation in CSS by Maciej Leszczyński (@asistapl) on CodePen.
Hiệu Ứng SVG Text Glitch Effect
Và bên dưới là dự án trên Codepen nhé!
See the Pen Universal SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.
Tạo Hiệu Ứng Loading SVG Animation
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Text Filling with Water by Lucas Bebber (@lbebber) on CodePen.
Thiết Kế Multi Line SVG Text
Và bên dưới là dự án trên Codepen nhé!
See the Pen Multi-line SVG text by Chris Gannon (@chrisgannon) on CodePen.
Ví Dụ CSS Javascript SVG Cho Website
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG text on an interactive bezier path. by Graham Pyne (@gpyne) on CodePen.
Ví Dụ CSS SVG Background
Và bên dưới là dự án trên Codepen nhé!
See the Pen Book cover - SVG text + Writing Mode by Cameron Fitzwilliam (@CameronFitzwilliam) on CodePen.
Hiệu Ứng SVG Text HTML5 CSS3
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG text effect by Max Gruson (@bleepbloop) on CodePen.
Ví Dụ 3D SVG Text
Và bên dưới là dự án trên Codepen nhé!
See the Pen Shaded Text by Rafael González (@rgg) on CodePen.
Hiệu Ứng SVG Text Animation
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Text Animation #1.. animated dashed stroke pattern by Ebram Marzouk (@P3R0) on CodePen.
Thiết Kế SVG Gradient Filled Text
Và bên dưới là dự án trên Codepen nhé!
See the Pen SVG Gradient Filled Text by Brenna O'Brien (@brenna) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng hover animation svg text 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ẻ!