30 Hoạt hình SVG tuyệt vời cho cảm hứng của bạn
Các nhà thiết kế đã sử dụng để tạo hình ảnh động trong các phần tử HTML bằng CSS. Tuy nhiên, do những hạn chế của các yếu tố HTML trong việc tạo các mẫu, hình dạng và các thứ khác, chúng tự nhiên chuyển sang SVG, cung cấp các khả năng thú vị hơn.
Làm việc với SVG, chúng tôi tận hưởng supprot trình duyệt tốt cho hoạt hình SVG và chúng tôi có nhiều cách hơn để tạo hoạt hình mới. Bạn có thể sử dụng cả chức năng hoạt hình SVG tích hợp hoặc hoạt hình CSS3 (lưu ý rằng không phải mọi thứ đều có thể được thực hiện bằng CSS nên vẫn cần JavaScript). Một cách khác là sử dụng các công cụ JavaScript như GSAP hoặc Snap. JS là cách thực hành tốt để tạo hoạt hình.
Ở đây tôi đã biên soạn một số SVG hoạt hình tuyệt vời. Một số sử dụng hoạt hình SVG, một số khác sử dụng chuyển đổi CSS cho hoạt hình cơ bản và phần còn lại sử dụng trợ giúp của JavaScript.
Biên giới hoạt hình của Sean McCaffery
Chỉ được tạo bằng CSS, một đường viền hình thành trơn tru xung quanh văn bản, khi bạn di chuột qua “BAY LƯỢN” chỉ dẫn.
Thanh bên SVG đàn hồi của Nikolay Talanov
Thanh bên trở nên đàn hồi khi bạn cố gắng kéo nó ra khỏi bên. Một khái niệm hay được áp dụng trên thanh bên ứng dụng lấy cảm hứng từ Thiết kế Vật liệu.
Kéo xuống để làm mới bởi Nikolay Talanov
Hầu hết các trang cho phép bạn “kéo xuống” trên trang để làm mới. Với hình ảnh động này, khi bạn “giải phóng” trang, biểu tượng Gửi thay đổi thành biểu tượng Máy bay và được thả vào không trung.
Hoạt hình Gradient trên văn bản của Patrick Young
Đây là một gradient văn bản tinh tế nhưng không dễ bỏ lỡ mà những người yêu thích kiểu chữ sẽ yêu thích.
Hoạt hình trái tim của Nikolay Talanov
Hoạt hình này cho bạn thấy làm thế nào một biểu tượng trái tim được tạo ra từ hai vòng tròn và hình vuông. Việc chuyển đổi được thực hiện với hoạt hình CSS.
Hãy đi du lịch bởi jjperezaguinaga
Một hình ảnh động minh họa các thành phố và các điểm du lịch nổi tiếng trên thế giới. Các di chuyển và biến đổi được tạo bằng hoạt hình CSS.
Menu chuyển đổi hình ảnh động của Tamino Martinius
Một hình ảnh động của biểu tượng bánh hamburger biến thành biểu tượng chéo. Xem mức độ chuyển tiếp trơn tru giữa hai đối tượng.
Infographic hoạt hình của Sdras
Một hình ảnh động tuyệt vời của Sarah Drasner, được cung cấp bởi dòng thời gian GSAP. Nó là một infographic đi vào cuộc sống, được làm bằng hình ảnh động. Sử dụng thanh trượt để truy cập các khung từ bất kỳ điểm nào.
Rain-Bros không thích JS của cihadturhan
Một hình ảnh động độc đáo và hài hước mô tả bước đi của các nhân vật. Chuyển động của các đối tượng trong bản demo này là sự kết hợp của hoạt hình SVG và CSS3. Chân sử dụng hoạt hình SVG trong khi các phần khác sử dụng hoạt hình CSS3.
Đồng hồ của Mohamad Mohebifar
Xem chuyển động mượt mà của kim giây trong đồng hồ này hiển thị thời gian hiện tại. Hoạt hình được thực hiện hoàn toàn bằng chức năng hoạt hình SVG.
Người đàn ông tên lửa cầu vồng của Chris Gannon
Một phi hành gia bắn vào không gian với gói phản lực chạy bằng cầu vồng (?). Hoạt hình đẹp được thực hiện bằng cách sử dụng plugin GSAP Tweenmax.
Biểu tượng hoạt hình của Luigi De Rosa
Tuy nhiên, qua các biểu tượng SVG hoạt hình này để kiểm tra xem chúng có thể làm gì. Người tạo đã thực hiện điều này bằng cách sử dụng GSAP.
Không gian làm việc bằng phẳng của Hoàng Nhật
Các hình ảnh động minh họa một không gian làm việc trong thiết kế theo phong cách phẳng. Tác giả đã sử dụng GSAP để tạo hình ảnh động tuyệt vời này của máy trạm.
Biểu tượng hoạt hình có thể nhấp của Hamish Williams
Đây là một hình ảnh động tuyệt vời sử dụng thư viện snap.svg. Nhấn vào đây để xem thư “gởi”.
Lặn bởi Chris Gannon
Bạn đã bao giờ bỏ qua đá trên mặt hồ? Đây là một hoạt hình đường dẫn SVG đơn giản minh họa điều đó nhưng không có đá và không có hồ.
Chuyển động cho web của LegoMushroom
Nó có hình ảnh động, một giai điệu hay, lối vào tuyệt vời cho văn bản, những gì không thích? Điều này được xây dựng với mo.js, một thư viện JavaScript đồ họa chuyển động.
Phông chữ hoạt hình của Lee Porter
Bên cạnh việc sử dụng SVG để tạo đường dẫn hoạt hình phác thảo một hình dạng, bạn có thể sử dụng nó trên kiểu chữ giống như những gì người tạo này tạo ra. Hiệu ứng làm mờ làm cho nó tuyệt vời hơn.
Thực đơn Gooey của Lucas Bebber
Hãy vui vẻ với hiệu ứng gooey trong thiết kế này, được tạo bằng bộ lọc SVG và bằng cách thêm hoạt hình CSS. Kết quả là thực tế và thực sự tuyệt vời, và bạn có thể chơi với bốn phiên bản khác nhau.
Bánh mới của Marco Barría
Cách làm bánh sinh nhật nhiều lớp được làm bằng hoạt hình SVG và CSS.
Cảm ơn bạn bởi Rachel Smith
Chỉ cần xem hoạt hình tuyệt vời này của một ghi chú cảm ơn đơn giản. Nó được tạo bằng thư viện SVG và GSAP TweenMax.
CSS vs SVG của Mario Sanchez Maselli
Bây giờ hãy xem so sánh về hoạt hình CSS và SVG, bạn có thấy sự khác biệt?
Chó đi bộ của Mark Nelson
Một cách khác để tạo hiệu ứng SVG là sử dụng các hình ảnh họa tiết, giống như cách người tạo này đã làm.
Máy xúc lật đồng hồ cát của Leela
Một tác phẩm sáng tạo được thực hiện bằng cách sử dụng hoạt hình SVG thuần túy (SMIL); không có CSS hay JS để làm động mọi thứ ở đây.
Logo hoạt hình của Adem ilter
Đây là một đoạn giới thiệu logo hoạt hình đẹp bằng cách sử dụng hoạt hình SVG nội tuyến. Không có CSS hay JS nào được sử dụng để làm mọi thứ hoạt động.
Thống kê hoạt hình của Jonas Badalic
Biểu đồ thống kê đẹp với hoạt hình SVG được cung cấp bởi thư viện Snap.SVG.
Ouroboros của Noel Delgado
Một đường dẫn hoạt hình SVG tuyệt vời. Đầu tiên, người tạo đã vẽ tuyến đường dẫn trên SVG, trước khi sử dụng tween.js để thêm hình ảnh động.
Hiệu ứng Gooey sáng tạo của Lucas Bebber
Dưới đây là bảy cách sử dụng bộ lọc SVG sáng tạo để tạo hiệu ứng giống như gooey. Trình hiển thị nhạc là sở thích của tôi, hình ảnh động trông rất đẹp.
Ném bò bởi Sarah Drasner
Đây là một hoạt hình SVG được cung cấp bởi TweenMax nhưng chỉ để làm cho vui. Giữ và kéo con bò xung quanh hành tinh. Nó sẽ quay theo "quỹ đạo".
Logo hoạt hình của Ali
Hoạt hình có thể là một bổ sung nhỏ đẹp cho logo bia sủi bọt. Các bong bóng nổi nhỏ xinh được xây dựng hoàn toàn bằng cú pháp hoạt hình gốc SVG.
