Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những hiệu ứng animation icon đẹp cho trang web được thiết lập bằng HTML, CSS và Javascript nhé!cho trang web 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.
SVG Hamburger Menu Icon Animation Collection
See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.
Sweet Menu Icon
See the Pen Sweet Menu Icon by Chris Deacy (@chrisdothtml) on CodePen.
Scroll Down Icon Animation
See the Pen Scroll Down Icon Animation by Tsukasa Aoki (@TKS31) on CodePen.
Animated Stroke SVG Icon
See the Pen Animated Stroke SVG Icon by Brad Arnett (@bradarnett) on CodePen.
Icon Animation from Dribbble
See the Pen Icon Animation from Dribbble by Yusuf (@yy) on CodePen.
Menu Toggle animation
See the Pen Menu Toggle animation by Aaron Iker (@aaroniker) on CodePen.
Animated Shopping Cart Icons
See the Pen Animated Shopping Cart Icons by Joni Trythall (@jonitrythall) on CodePen.
Map marker CSS only
See the Pen Map marker CSS only by Andreas Storm (@avstorm) on CodePen.
CSS Site Scroll Micro Animation
See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
SVG Icon animation
See the Pen SVG Icon animation by John Grishin (@exah) on CodePen.
Playing Icon Animation
See the Pen Playing Icon Animation by Russ Gossett (@russgossett) on CodePen.
weather animations icon
See the Pen weather animations by Shay (@xaksis) on CodePen.
CSS iMessage Typing Indicator
See the Pen CSS iMessage Typing Indicator by Joseph Fusco (@fusco) on CodePen.
Facebook Emoji Reactions | Pure CSS
See the Pen Facebook Emoji Reactions | Pure CSS by Ashish Bardhan (@AshBardhan) on CodePen.
Morph Play Button To Video Player
See the Pen Morph Play Button To Video Player #GSAP #ExpoScaleEase by Maciej Leszczyński (@asistapl) on CodePen.
SVG Arrow next previous animation
See the Pen SVG Arrow next previous animation by Karim (@karimhossenbux) on CodePen.
Live Icon Animation
See the Pen Live Icon Animation by Rafał Naczyński (@naczynski) on CodePen.
WLAN Search animation
See the Pen WLAN Search animation by Aaron Iker (@aaroniker) on CodePen.
+/- Toggle
See the Pen +/- Toggle by Aaron Iker (@aaroniker) on CodePen.
Arrow animations
See the Pen Arrow animations by Aaron Iker (@aaroniker) on CodePen.
Design -> Code Loader
See the Pen Design -> Code Loader (CSS only) by Aaron Iker (@aaroniker) on CodePen.
Hex Animated Icons
See the Pen Hex Animated Icons by Siyoung Park (@psyonline) on CodePen.
Wavy Loading Animations
See the Pen Wavy Loading Animations by Kyle Brumm (@kjbrum) on CodePen.
CSS3 Flat Circle/Round Icon Animation
See the Pen CSS3 Flat Circle/Round Icon Animation by Jascha Goltermann (@jascha) 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 icon animation hữu íchdà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ẻ!