20 ví dụ hoạt hình tuyệt vời của Svg

Đồ họa vectơ có thể mở rộng (SVG) là một định dạng hình ảnh được viết bằng XML. Với SVG, bạn có thể mã hóa đồ họa có thể mở rộng hai chiều. Sau đó, bạn có thể triển khai và sửa đổi chúng trong CSS và JavaScript.

SVG cho phép ba loại đồ họa: hình dạng vector (đường thẳng và đường cong theo mọi hướng và hình dạng), hình ảnh và văn bản. Do khả năng đa dạng của nó, các nhà thiết kế web chuyển sang SVG để tạo các hình động phức tạp. Chúng rất dễ cài đặt, không làm giảm chất lượng khi thay đổi kích thước và không yêu cầu bất kỳ ứng dụng của bên thứ ba nào hoạt động.

Vì hoạt hình vẫn đang ngày càng phổ biến, hầu hết không quen thuộc với chúng. Bài viết này sẽ nêu bật 20 hình ảnh động SVG tuyệt vời cho thấy tiềm năng của định dạng này.

1. Biểu tượng SVG y tế của kittons

đường dẫn nhanh

1. Biểu tượng SVG y tế của kittons
2. Di chuột của SeanMcCaffery
3. Kéo xuống để làm mới (Máy bay giấy) của Nikolay Talanov
4. Cứ tiếp tục bởi Diaco M. Lotfollahi
5. Bộ lọc SVG được thêm vào Video HTML5
6. Trò chơi ghép hình
7. Gradient Gradient của Patrick Young
8. Hãy đi du lịch bởi jjperezaguinaga
9. Đồng hồ của Mohamad Mohebifar
10. Biểu tượng hoạt hình của Luigi De Rosa
11. Tất cả các thiết bị trong SVG của Chris Gannon
12. Thác nước của Chris Gannon
13. Máy phát điện thực vật của Blake Bowen
14. Biểu tượng có thể nhấp của Hamish Williams
15. Bánh mới của Marco Barría
16. Máy hủy tài liệu của Chris Gannon
17. PolyLion thấp của GRAYGHOST
18. Máy xúc lật đồng hồ cát của Leela
19. Bò phản ứng của Sarah Drasner
20. Sinh viên của Domany
Lượt của bạn

Hoạt hình ấm áp và mượt mà này là tuyệt vời cho bất kỳ trang web liên quan đến sức khỏe. Trong khi bạn liệt kê thông qua các chủ đề khác nhau, hình ảnh sẽ tinh tế xuất hiện. Chiếc xe cứu thương hoặc nguyên tử sẽ xây dựng, mắt sẽ mở ra và bác sĩ sẽ nhảy ra. Hoạt hình này cho thấy tất cả sự thú vị và năng động của SVG.

Liên kết

2. Di chuột của SeanMcCaffery

Hoạt hình phổ quát mà bạn có thể đặt vào bất kỳ trang web tương tác. Sự xuất hiện tinh tế của các đường viền khi bạn di chuột để lại cho bạn một cảm giác thỏa mãn và mời bạn nhấp vào liên kết.

Liên kết

3. Kéo xuống để làm mới (Máy bay giấy) của Nikolay Talanov

Thông thường, các trang sẽ làm mới khi bạn kéo xuống xuống trên chúng. Hoạt hình này đưa điều này lên một tầm cao mới. Khi bạn kéo xuống để giải phóng nó, bạn sẽ phóng một chiếc máy bay giấy lên trời. Nếu bạn muốn khách truy cập của mình thường xuyên làm mới ứng dụng của mình, bạn nên xem xét thêm một hình ảnh động như thế này.

4. Cứ tiếp tục bởi Diaco M. Lotfollahi

Một hình ảnh động SVG cho thấy tiềm năng của Thang đo tỷ lệ. Chuyển động chính xác trơn tru của cơ thể con người là thôi miên.

Liên kết

5. Bộ lọc SVG được thêm vào Video HTML5

Paul Irish từ nhóm Google Chrome đã xem xét cách SVG có thể sửa đổi nội dung bên ngoài đồ họa vector. Ông đã kết hợp CSS và SVG để tạo ra các bộ lọc trực quan tuyệt vời để cho thấy rằng hoạt hình SVG có thể là một bổ sung tốt cho video làm sẵn.

Liên kết

6. Trò chơi ghép hình

Bạn có thể thực hiện các câu đố ghép hình tương tác tuyệt vời với hoạt hình SVG. Trong ví dụ này, chúng ta có thể chọn một trong nhiều bức tranh và xem cách nó giải mã thành nhiều mảnh nhỏ của câu đố. Bạn có thể xây dựng lại nó là tốt!

Liên kết

7. Gradient Gradient của Patrick Young

Nếu bạn thích đèn neon và phông chữ đẹp, bạn sẽ thích hoạt hình này. Tác phẩm này cho thấy bạn không cần bất kỳ đường di chuyển nào cho một hình ảnh động rực rỡ, chỉ cần một phông chữ tuyệt vời và mã màu phù hợp với hiệu ứng chuyển màu.

Liên kết

8. Hãy đi du lịch bởi jjperezaguinaga

Hai máy bay và khinh khí cầu xoay quanh các địa danh nổi tiếng trên thế giới. Hoạt hình này là đầy màu sắc, lạc quan, và tâm trí. Nó cho thấy mọi thứ bạn có thể làm nếu bạn thành thạo SVG.

Liên kết

9. Đồng hồ của Mohamad Mohebifar

Một hình ảnh động SVG đơn giản của một chiếc đồng hồ đang chuyển động hiển thị thời gian hiện tại. Chuyển động nhẹ nhàng của con trỏ và thiết kế tối giản làm nên điều kỳ diệu cho hoạt hình này.

Liên kết

10. Biểu tượng hoạt hình của Luigi De Rosa

Nếu bạn di chuột qua các biểu tượng này, bạn sẽ kích hoạt các hình ảnh động, đơn giản nhưng hiệu quả. Bạn có thể thấy rằng bạn không cần phải làm điều kỳ diệu để tạo ra một biểu tượng hoạt hình ấn tượng.

11. Tất cả các thiết bị trong SVG của Chris Gannon

Hoạt hình một lần đi qua tất cả các thiết bị thông minh mà chúng ta sử dụng theo cách sáng tạo nhất. Máy tính để bàn sẽ biến thành máy tính xách tay, máy tính xách tay thành máy tính bảng, sau đó thành điện thoại thông minh.

Liên kết

12. Thác nước của Chris Gannon

Một bức khác của Chris Gannon, đây là một minh chứng gọn gàng về đáy thác nước sủi bọt. Chuyển động của nước rất gọn gàng và bạn có thể thấy những giọt nước bắn tung tóe rời khỏi đường viền của hình ảnh động để khiến mọi thứ trông thật hơn.

Liên kết

13. Máy phát điện thực vật của Blake Bowen

Bây giờ cái này là một cái gì đó khác. Khi bạn nhấp vào nút 'Tạo', bạn sẽ thấy cây cối mọc lên và phát triển. Nhưng mỗi lần bạn nhấp, các mẫu khác nhau sẽ hình thành.

Liên kết

14. Biểu tượng có thể nhấp của Hamish Williams

Một SVG tương tác khác kích hoạt một hình ảnh động khi bạn nhấp vào nó. Cái này sẽ khởi tạo hình ảnh động Send Send khi bạn nhấp vào nó.

Liên kết

15. Bánh mới của Marco Barría

Hoạt hình thú vị cho thấy việc tạo ra một lớp bánh theo từng lớp. Đây là một hình ảnh động SVG ấn tượng phù hợp cho một tấm thiệp sinh nhật.

16. Máy hủy tài liệu của Chris Gannon

Nếu bạn thích xem xé giấy, bạn sẽ thích hoạt hình này mô tả một cỗ máy xé giấy bằng giấy không giới hạn số lần trong một chuỗi liền mạch.

Liên kết

17. PolyLion thấp của GRAYGHOST

Đây là một minh họa và hoạt hình gây kinh ngạc, mô tả đầu sư tử xuất hiện và biến mất dưới dạng đa giác hoạt hình.

Liên kết

18. Máy xúc lật đồng hồ cát của Leela

Một hình ảnh động hiệu quả khác chỉ sử dụng SVG. Cứ sau 5 giây, đồng hồ cát sẽ đảo lộn và bắt đầu một chu kỳ mới.

Liên kết

19. Bò phản ứng của Sarah Drasner

Đây là một hình ảnh động tương tác vui nhộn cho phép bạn nhấp vào một con bò và kéo nó quanh mặt trăng trong khi một phi hành gia đang bối rối nhìn vào nó.

20. Sinh viên của Domany

Một sinh viên nhiệt tình xuất hiện sẵn sàng để học! Đó là một hình ảnh động tuyệt vời nơi các trang sách đang chuyển gọn gàng. Không chớp mắt từ học sinh, nhưng đây vẫn là một hoạt hình hoàn hảo gọn gàng để kết thúc danh sách này.

Liên kết