30个创新的 SVG 动画展示【下篇】

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

Diving by Chris Gannon

Have you ever skipped stones on the surface of a lake? Here’s a simple SVG path animation illustrating that but with no stones, and no lake.

Motion for the web by LegoMushroom

It has animation, a nice tune, super cool entrance for the text, what’s not to like? This is built with mo.js, a motion graphic JavaScript library.

Animated writing font by Lee Porter

Besides using SVG to make path animation sketching a shape, you can use it on typography like what this creator made. The blur effect makes it more awesome.

Gooey menu by Lucas Bebber

Have fun with the gooey effect in this design, which is made using SVG filter and by adding CSS animation. The result is realistic and really cool, and you can play with four different versions.

New Cake by Marco Barría

How to make a layered birthday cake made with SVG and CSS animation.

Thank you by Rachel Smith

Just see this awesome animation of a simple thank-you note. It is created using SVG and GSAP TweenMax library.

CSS vs SVG by Mario Sanchez Maselli

Now let’s look the comparison about CSS and SVG animation, do you see the difference?

Walking Dog by Mark Nelson

Another way to animate SVG is by using sprites images, like how this creator did.

Hourglass loader by Leela

A creative work made using pure SVG animation (SMIL); no CSS or JS to animate things here.

Logo Animation by Adem ilter

Here’s a nice animated logo intro using inline SVG animation. No CSS or JS was used to make everything work.

Stats animation by Jonas Badalic

A beautiful stats graph with SVG animation powered by Snap.SVG library.

Ouroboros by Noel Delgado

An amazing SVG animation path. First the creator drew a path route on SVG, before using tween.js to add animation. The tutorial can be found here.

Creative Gooey Effects by Lucas Bebber

Here are seven creative uses of SVG filter to make a gooey-like effect. The music visualizer is my favorite, the animation looks very nice.

Throw the cow by Sarah Drasner

This one is an SVG animation powered by TweenMax but made just for fun. Hold and drag the cow around the planet. It will spin in “orbit”.

Animated Logo by Ali

Animation could be a nice little addition for a bubbling beer logo. The nice little floating bubbles are built purely with SVG native animation syntax.

 

赞 (9) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏