带给你灵感:30个超棒的 SVG 动画展示【上篇】

简介:   前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画。然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力。借助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".

 

您可能感兴趣的相关文章

 

本文链接:带给你灵感:30个超棒的 SVG 动画展示【上篇】

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/

相关文章
|
大数据 JavaScript
解决父类加载iframe,src参数过大导致加载失败
原文:解决父类加载iframe,src参数过大导致加载失败 或者是使用js加载src:var params = "?pk_id="+pk_id;var frameLeftSrc = "/****/****.do"+params;$('#leftFrame').attr("src",frameLeftSrc);(先说明一下,此处只是以一个参数为例,实际可能会有多个参数。
1199 0
|
5月前
|
应用服务中间件 Linux nginx
Nginx镜像支持哪些版本?
Nginx镜像支持哪些版本?
471 1
|
移动开发 JavaScript 前端开发
Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
342 0
Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
|
7月前
|
安全 物联网 数据处理
探索未来:区块链技术在物联网中的应用与挑战
随着技术的不断演进,区块链和物联网的结合已成为推动数字化转型的前沿力量。本文深入探讨了区块链技术在物联网领域的应用前景、面临的安全与隐私挑战以及潜在的解决方案,旨在为读者提供一个关于这一跨学科技术融合的全面视角。通过分析具体案例和最新研究数据,文章揭示了区块链技术如何增强物联网设备的安全性、提高数据处理效率,并促进去中心化应用的发展。同时,也指出了当前实施中的主要障碍和未来发展的可能方向。
|
9月前
|
安全 网络安全 数据安全/隐私保护
ansible 建立ssh信任并分发到各个机器
ansible 建立ssh信任并分发到各个机器
185 0
|
5月前
|
机器学习/深度学习 算法 自动驾驶
深度学习之分布式智能体学习
基于深度学习的分布式智能体学习是一种针对多智能体系统的机器学习方法,旨在通过多个智能体协作、分布式决策和学习来解决复杂任务。这种方法特别适用于具有大规模数据、分散计算资源、或需要智能体彼此交互的应用场景。
286 4
|
7月前
|
Web App开发 JavaScript
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
862 0
|
9月前
|
网络协议 Ubuntu Unix
Linux 下使用 socket 实现 TCP 服务端
Linux 下使用 socket 实现 TCP 服务端
108 0

热门文章

最新文章