标签:SVG

前端开发

Web设计新趋势:SVG Sprites实践应用

4

前端里 - 小鱼 发布于 2017-11-06

前言 随着移动互联网的到来,各种高清屏幕移动设备的层出不穷,导致H5应用在移动设备retina屏幕下经常会遇到图标不清晰的问题。 为了解决屏幕分辨率对图标影响的问题,通常采用CSS Sprite,Icon Font,CSS Icon以及SVG以适应@x1屏、@2屏、@3屏,相对比...

阅读(885)评论(0)赞 (3)

素材资源

Hero Patterns – SVG 背景纹理素材的网站

1

前端里 - 小鱼 发布于 2017-02-11

Hero Patterns 是一个聚合了各种 SVG 背景纹理素材的网站,提供的多样的素材可以给你的网站带去特色。 SVG 是一种分辨率无关的图形(矢量图形)。这意味着它在任何类型的屏幕都不会遭受任何质量损失。 立即去看看

阅读(3645)评论(0)赞 (38)

前端开发

Seen.js – 使用 SVG & Canvas 渲染 3D 场景

1

前端里 - 小鱼 发布于 2016-11-12

Seen.js 渲染3D场景为 SVG 或者 HTML5 画布。Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象。所有这个库的其它组件都是不用关心将要渲染的上下文的类型。   官方网站      立即下载

阅读(5311)评论(0)赞 (55)

前端开发

推荐15款制作 SVG 动画的 JavaScript 库

15

前端里 - 小鱼 发布于 2016-03-07

在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计。绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用。这些JS库帮助设计师和开发人员可以轻松地为他们的项目和Web应用程序创建创新和逼真的图...

阅读(9508)评论(0)赞 (51)

前端开发

推荐8个实现 SVG 动画的 JavaScript 库

8

前端里 - 小鱼 发布于 2015-12-11

SVG 是一种分辨率无关的图形(矢量图形)。这意味着它在任何类型的屏幕都不会遭受任何质量损失。除此之外,你可以让 SVG 灵活现一些动画效果。这篇文章就给大家推荐8个实现 SVG 动画的 JavaScript 库。

阅读(5040)评论(1)赞 (6)

前端开发

SVG 创建材料设计涟漪(Ripple)效果

1

前端里 - 小鱼 发布于 2015-10-26

Codrops 上面发布了一个深入的教程,就如何建立谷歌材料设计的径向操作规范中列出的涟漪效果,并基于 SVG 和 GreenSock 来实现。随着谷歌的材料设计的出现,带来了一个视觉语言,创建跨平台和设备的统一体验。在本教程中,他们会向你展示实现涟漪效果的一种方式。

阅读(4365)评论(2)赞 (10)

前端开发

学习如何制作 SVG 弹性动画进度条

1

前端里 - 小鱼 发布于 2015-10-08

Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现。按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个标签,该标签指示下载百分比。如果你想使用这部分代码在你的项目,到 Github ...

阅读(6101)评论(0)赞 (13)

前端开发

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

2

前端里 - 小鱼 发布于 2015-09-28

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

阅读(6619)评论(2)赞 (9)

前端开发

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

1

前端里 - 小鱼 发布于 2015-09-20

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

阅读(7356)评论(2)赞 (23)