SVG (Scalable Vector Graphics)는 XML로 작성된 이미지 형식입니다. SVG를 사용하면 2 차원 확장 가능 그래픽을 코딩 할 수 있습니다. 그런 다음 CSS 및 JavaScript로이를 구현하고 수정할 수 있습니다.
SVG는 세 가지 유형의 그래픽 : 벡터 모양 (모든 방향과 모양의 직선과 곡선), 이미지 및 텍스트를 허용합니다. 다양한 기능으로 인해 웹 디자이너는 SVG로 전환하여 복잡한 애니메이션을 만듭니다. 설치가 쉽고 크기를 조정할 때 품질이 떨어지지 않으며 작동하기 위해 타사 앱이 필요하지 않습니다.
애니메이션은 여전히 인기가 높아지고 있기 때문에 대부분 익숙하지 않습니다. 이 기사에서는이 형식의 잠재력을 보여주는 20 가지 환상적인 SVG 애니메이션을 강조합니다.
1. kittons의 의료 SVG 아이콘
빠른 링크
- 1. kittons의 의료 SVG 아이콘
- 2. SeanMcCaffery의 호버
- 3. Nikolay Talanov의 종이 비행기를 아래로 당겨 새로 고침
- 4. 그냥 Diaco M. Lotfollahi에 의해 계속
- 5. HTML5 비디오에 추가 된 SVG 필터
- 6. 직소 퍼즐
- 7. 패트릭 영의 라이너 그라디언트
- 8. jjperezaguinaga의 여행하자
- 9. Mohamad Mohebifar의 시계
- 10. Luigi De Rosa의 애니메이션 아이콘
- 11. SVG의 모든 장치 : Chris Gannon
- 12. Chris Gannon의 폭포
- 13. Blake Bowen의 플랜트 생성기
- 14. Hamish Williams의 클릭 가능한 아이콘
- 15. Marco Barría의 새로운 케이크
- 16. Chris Gannon의 종이 분쇄기
- 17. GRAYGHOST에 의한 낮은 폴리 라이온
- 18. Leela의 모래 시계 로더
- 19. Sarah Drasner의 반응 형 암소
- 20. Domany의 학생
- 네 차례 야
이 따뜻하고 부드러운 애니메이션은 모든 건강 관련 웹 사이트에 적합합니다. 다른 스레드를 통해 나열하는 동안 이미지가 미묘하게 나타납니다. 구급차 차량 또는 원자가 구성되고 눈이 열리고 의사가 튀어 나옵니다. 이 애니메이션은 SVG의 모든 재미와 역 동성을 보여줍니다.
링크
2. SeanMcCaffery의 호버
모든 대화 형 웹 사이트에 넣을 수있는 유니버설 애니메이션. 마우스를 가져 가면 테두리의 미묘한 모양이 만족스럽고 링크를 클릭하도록 초대합니다.
링크
3. Nikolay Talanov의 종이 비행기를 아래로 당겨 새로 고침
일반적으로 페이지를 "풀다운"하면 페이지가 새로 고쳐집니다. 이 애니메이션은이를 새로운 차원으로 끌어 올립니다. 아래로 당겨 해제하면 하늘로 종이 비행기가 발사됩니다. 방문자가 앱을 자주 새로 고치려면 이와 같은 애니메이션 추가를 고려해야합니다.
4. 그냥 Diaco M. Lotfollahi에 의해 계속
스케일링 벡터의 잠재력을 보여주는 SVG 애니메이션. 인체의 부드럽고 정확한 움직임은 최면입니다.
링크
5. HTML5 비디오에 추가 된 SVG 필터
Chrome 팀의 Paul Irish는 SVG가 벡터 그래픽 외부의 컨텐츠를 수정하는 방법을 살펴 보았습니다. 그는 CSS와 SVG를 결합하여 놀라운 시각적 필터를 만들어 SVG 애니메이션을 기성품 비디오에 추가 할 수 있음을 보여줍니다.
링크
6. 직소 퍼즐
SVG 애니메이션을 사용하여 놀라운 대화 형 직소 퍼즐을 만들 수 있습니다. 이 예에서는 많은 그림 중 하나를 선택하여 퍼즐의 여러 조각으로 어떻게 분해되는지 확인할 수 있습니다. 당신도 그것을 재구성 할 수 있습니다!
링크
7. 패트릭 영의 라이너 그라디언트
네온 불빛과 아름다운 글꼴을 사용하면이 애니메이션을 즐길 수 있습니다. 이 작품은 화려한 애니메이션을 위해 움직이는 선이 필요하지 않고 그라디언트 효과가있는 적절한 글꼴과 적절한 색상 코드 만 보여줍니다.
링크
8. jjperezaguinaga의 여행하자
세계의 유명한 랜드 마크를 중심으로 두 개의 비행기와 열기구가 회전합니다. 이 애니메이션은 다채롭고 낙관적이며 마음을 사로 잡습니다. SVG에 능숙하다면 할 수있는 모든 것을 보여줍니다.
링크
9. Mohamad Mohebifar의 시계
현재 시간을 보여주는 움직이는 시계의 간단한 SVG 애니메이션. 포인터의 부드러운 움직임과 최소한의 디자인은이 애니메이션에 놀라운 일입니다.
링크
10. Luigi De Rosa의 애니메이션 아이콘
이 아이콘 위로 마우스를 가져 가면 간단하지만 효과적인 애니메이션이 트리거됩니다. 인상적인 애니메이션 아이콘을 만들기 위해 놀라운 일을 할 필요가 없음을 알 수 있습니다.
11. SVG의 모든 장치 : Chris Gannon
가장 독창적 인 방식으로 사용하는 모든 스마트 기기에 적용되는 원 테이크 애니메이션. 데스크톱은 랩톱, 랩톱, 태블릿, 스마트 폰으로 바뀝니다.
링크
12. Chris Gannon의 폭포
크리스 간논 (Chris Gannon)이 제작 한 또 다른 제품은 거품이있는 폭포 바닥을 깔끔하게 보여줍니다. 물의 움직임이 깔끔하고, 물이 튀는 작은 방울이 애니메이션의 경계를 떠나 모든 것을보다 사실적으로 보이도록 볼 수 있습니다.
링크
13. Blake Bowen의 플랜트 생성기
이제 이것은 다른 것입니다. '만들기'버튼을 클릭하면 식물이 자라고 있습니다. 그러나 클릭 할 때마다 다른 패턴이 형성됩니다.
링크
14. Hamish Williams의 클릭 가능한 아이콘
애니메이션을 클릭하면 트리거되는 또 다른 대화식 SVG. 클릭하면 "보내기"애니메이션이 시작됩니다.
링크
15. Marco Barría의 새로운 케이크
케이크를 레이어별로 만드는 재미있는 애니메이션. 생일 카드에 적합한 인상적인 SVG 애니메이션입니다.
16. Chris Gannon의 종이 분쇄기
종이 파쇄를 보는 것을 즐기는 경우 종이로 종이를 무제한으로 연속적으로 파쇄하는 기계를 보여주는이 애니메이션을 즐길 수 있습니다.
링크
17. GRAYGHOST에 의한 낮은 폴리 라이온
이것은 애니메이션 다각형의 형태로 나타나고 사라지는 사자의 머리를 묘사하는 눈부신 일러스트레이션과 애니메이션입니다.
링크
18. Leela의 모래 시계 로더
SVG 만 사용하는 또 다른 효과적인 애니메이션. 5 초마다 모래 시계가 거꾸로되어 새주기가 시작됩니다.
링크
19. Sarah Drasner의 반응 형 암소
이것은 재미있는 대화 형 애니메이션으로 암소를 클릭하고 달 주위를 드래그하여 당황한 우주 비행사가 그것을 볼 수 있습니다.
20. Domany의 학생
열정적 인 학생이 배울 준비가 된 것 같습니다! 책 페이지가 깔끔하게 바뀌는 훌륭한 애니메이션입니다. 학생의 눈을 깜빡이지 않지만이 목록을 완성하기에는 여전히 완벽한 애니메이션입니다.
링크
네 차례 야
이 목록에 포함되지 않은 좋아하는 SVG 애니메이션은 무엇입니까? 아래 의견에서 선택을 공유하십시오!
