Морфинг — это способность перемещать и растягивать один элемент в другом. CSS и SVG имеют ряд совершенно уникальных методов перемещения и управления элементами. Если вы ищете вдохновение для создания анимации морфинга с помощью CSS и SVG, то вот 25 интересных примеров.
Содержание
- 1 Loading Animation with Morphing SVG!
- 2 Mobiltelefonens Evolution (SVG Shape Morphing)
- 3 Hamburger icon with Morphing Menu
- 4 Morphing Input Field Button
- 5 Material Papersheet Morphing
- 6 Search bar animation
- 7 Morphing shape with spinning color stroke (svg + canvas)
- 8 Material design morphing icons
- 9 Morphing Device
- 10 React Morph Clock
- 11 UI: Button morphing into form
- 12 Split Showcase
- 13 Page Transition Loader
- 14 Onion Skinning Text Morphing
- 15 MorphSVG Button
- 16 Gravity – Animating SVG Icon
- 17 Create a Christmas Snowflake
- 18 DC Morph Btns
- 19 UX 2 : Password morph
- 20 Context-Shifting in UX Patterns
- 21 Morph complex paths
- 22 SVG Pencil Download
- 23 Snap.svg letter morph animation
- 24 Open/Close SVG Drawer
- 25 SVG Counter (CSS Only)
Loading Animation with Morphing SVG!
Mobiltelefonens Evolution (SVG Shape Morphing)
Hamburger icon with Morphing Menu
Morphing Input Field Button
Material Papersheet Morphing
Search bar animation
Morphing shape with spinning color stroke (svg + canvas)
Material design morphing icons
Morphing Device
React Morph Clock
UI: Button morphing into form
Split Showcase
Page Transition Loader
Onion Skinning Text Morphing
MorphSVG Button
Gravity – Animating SVG Icon
Create a Christmas Snowflake
DC Morph Btns
UX 2 : Password morph
Context-Shifting in UX Patterns
Morph complex paths
SVG Pencil Download
Snap.svg letter morph animation
Open/Close SVG Drawer
SVG Counter (CSS Only)
