标签:SVG

前端开发

15个可以带给你启发的 SVG 动画示例

前端里 - 小鱼 发布于 2020-05-05

在本文中,我们收集了15个 SVG 动画示例,以启发您在自己的 Web 项目中使用它们。和其他图像格式相比,SVG(可缩放矢量图形)具有许多优势。首先,SVG 具有可扩展性,因此可以适应任何屏幕尺寸而不会造成质量损失。然后,浏览器只需加载更少的资源,可以更快地加载。

阅读(4356)评论(0)赞 (14)

前端开发

再谈 SVG vs Image vs Iconfont

13

前端里 - 小鱼 发布于 2018-12-20

这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式? 希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs Image 比方说现在要做下图这样的视觉效果: 分析:可能需要三张图片 鼠标移入时的...

阅读(3015)评论(0)赞 (5)

前端开发

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

4

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

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

阅读(1358)评论(0)赞 (5)

素材资源

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

1

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

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

阅读(4360)评论(0)赞 (45)

前端开发

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

1

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

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

阅读(5949)评论(0)赞 (57)

前端开发

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

15

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

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

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

前端开发

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

8

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

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

阅读(5591)评论(1)赞 (7)

前端开发

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

1

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

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

阅读(4910)评论(2)赞 (11)

前端开发

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

1

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

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

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