标签:SVG

前端开发

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

4

前端里 - 小鱼 发布于 3小时前

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

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

素材资源

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

1

前端里 - 小鱼 发布于 9个月前 (02-11)

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

阅读(2502)评论(0)赞 (35)

前端开发

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

1

前端里 - 小鱼 发布于 12个月前 (11-12)

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

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

前端开发

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

15

前端里 - 小鱼 发布于 2年前 (2016-03-07)

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

阅读(8525)评论(0)赞 (49)

前端开发

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

8

前端里 - 小鱼 发布于 2年前 (2015-12-11)

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

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

前端开发

DrawSVG – SVG 路径动画 jQuery 插件

1

前端里 - 小鱼 发布于 2年前 (2015-12-01)

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG 是完全免费的,赶紧来试用一下吧。(更多…)...

阅读(3736)评论(0)赞 (4)

前端开发

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

1

前端里 - 小鱼 发布于 2年前 (2015-10-26)

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

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

前端开发

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

1

前端里 - 小鱼 发布于 2年前 (2015-10-08)

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

阅读(5899)评论(0)赞 (12)

前端开发

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

2

前端里 - 小鱼 发布于 2年前 (2015-09-28)

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

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

前端开发

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

1

前端里 - 小鱼 发布于 2年前 (2015-09-20)

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

阅读(6397)评论(2)赞 (21)