30个超棒的 SVG 动画展示【上篇】

前端开发人员和设计师一般使用 CSS 来创建HTML元素动画。然而,由于HTML在创建图案,形状,和其他方面的局限性,它们自然的转向了SVG,它提供了更多更有趣的能力。借助SVG,我们有更多的方式来创建新的动画。您可以同时使用内置的SVG动画功能和CSS3动画。

Border Animation by Sean McCaffery

Made only with CSS, a border forms smoothly around the text, when you hover over the “HOVER” instruction.

Elastic SVG Sidebar by Nikolay Talanov

The sidebar becomes elastic when you try to pull it away from the side. A nice concept applied on a Material Design-inspired application sidebar.

Pull Down to Refresh by Nikolay Talanov

Most pages allow you to “pull down” on the page to refresh. With this animation, when you “release” the page, the Send icon changes into a Plane icon and gets released into the air.

Animated Gradient on Text by Patrick Young

Here’s a subtle but not easy to miss moving text gradient that typography lovers will love.

Heart Animation by Nikolay Talanov

This animation shows you how a heart icon is made from two circles and a square. The transformation is done with CSS animation.

Let’s Travel by jjperezaguinaga

An animation that illustrate cities and popular tourist destinations in the world. The moves and transformations are created using CSS animation.

Menu toggle animation by Tamino Martinius

A morphing animation of the hamburger icon turning into a cross icon. See how smooth the transition is between the two objects.

Animated Infographic by Sdras

An awesome animation by Sarah Drasner, powered by GSAP timeline. It is an infographic come to life, made with animation. Use the slider to access the frames from any point.

Rain-Bros don’t like JS by cihadturhan

A unique and funny loop animation depicting the characters’ walk. The movement of the objects in this demo is a combination of SVG and CSS3 animation. The legs use SVG animation while other parts use CSS3 animation.

Clock by Mohamad Mohebifar

Watch the smooth movement of the second-hand in this clock showing the current time. The animation is completely made using the SVG animation functionality.

Rainbow Rocket Man by Chris Gannon

An astronaut shooting into space with it’s rainbow-powered jet pack(?). Nice animation made using the GSAP Tweenmax plugin.

Animated Icon by Luigi De Rosa

However over these animated SVG icons to check out what they can do. The creator made this using GSAP.

Flat Workspace by Hoàng Nhật

The animation illustrates a workspace in flat style design. The creator used GSAP to make this awesome animation of a workstation forming.

The clickable animated icon by Hamish Williams

This is a cool animation makes use of the snap.svg library. Click to see mail being “sent”.

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《30个超棒的 SVG 动画展示【上篇】》
文章链接:https://www.lbyxlz.com/30%e4%b8%aa%e8%b6%85%e6%a3%92%e7%9a%84-svg-%e5%8a%a8%e7%94%bb%e5%b1%95%e7%a4%ba%e3%80%90%e4%b8%8a%e7%af%87%e3%80%91/
分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活