这里我们收集了一些超酷的基于SVG的动画效果,给大家一些参考。这些动画有的使用了SVG动画,也有是使用CSS做基本动画,用JS做更丰富的效果。
Border Animation by Sean McCaffery
纯CSS,文字边框环绕,hover时触发。
Elastic SVG Sidebar by Nikolay Talanov
侧边栏拉出时的弹性效果。用于材料设计『Material Design』的应用的概念设计。
Pull Down to Refresh by Nikolay Talanov
一个下拉刷新效果。
Animated Gradient on Text by Patrick Young
渐变文字的动画效果。
Heart Animation by Nikolay Talanov
变换用CSS实现,嗯,一个心形的实现过程动画。
Let’s Travel by jjperezaguinaga
一个描述城市和旅游目的地的动画。部分使用CSS动画完成。
Menu toggle animation by Tamino Martinius
一个汉堡包图标的变形动画
Animated Infographic by Sdras
Sarah Drasner做的一个牛逼动画,基于GSAP timeline。
Rain-Bros don’t like JS by cihadturhan
Clock by Mohamad Mohebifar
Rainbow Rocket Man by Chris Gannon
Animated Icon by Luigi De Rosa
Flat Workspace by Hoàng Nhật
扁平化的工作台展示。创作者使用了 GSAP 。
The clickable animated icon by Hamish Williams
这个酷酷的动画使用了 snap.svg 库。
Diving by Chris Gannon
Motion for the web by LegoMushroom
使用了 mo.js Javascript图形库。
Animated writing font by Lee Porter
Gooey menu by Lucas Bebber
New Cake by Marco Barría
Thank you by Rachel Smith
CSS vs SVG by Mario Sanchez Maselli
Walking Dog by Mark Nelson