这些动画 SVG 图标是将您的客户发送到您的社交媒体的完美方式。它们都是 SVG(可缩放矢量图形),这意味着您可以将它们制作成任何大小并在任何屏幕(甚至视网膜)上显示它们,它们看起来 100% 清晰明了。
当图标不在屏幕上时会发生什么?不用担心,在您将它们滚动到视图中之前,这些图标不会动画。
包括的图标
添加这个
亚马逊
贝博
行为
博主
可口的
越轨艺术
掘客
运球
投递箱
印象笔记
Facebook
弗里克
福斯特
GitHub
谷歌
Grooveshark
Instagram
众筹
最后一个.fm
领英
我的空间
毕加萨
Pinterest
知乎
RSS
分享这个
Skype
声云
偶然发现
技术官僚
棒棒哒
推特
维密欧
维基百科
WordPress
邢
雅虎!
YouTube
飞虫
易于编辑
使用这些图标非常简单!说真的,只需添加一个具有正确类名的 div,我们将从那里获取它:
<div class=”browsericon facebookIcon”></div>
所有颜色都在 CSS 中处理,因此无需深入研究 SVG 代码或打开图形文件:
.browsericon .facebook .f{
填充:#D97827;
}
即使添加按钮来控制动画也是小菜一碟。您甚至可以通过将数字放在括号中来指定哪些图标会受到影响:
<button onclick=”restartIcons([0,1,2,3,4])”>重启</button>
<button onclick=”reverseIcons([0,1,2,3,4])”>反向</button>
想要疯狂并弄乱 .js 文件吗?再简单不过了:
var imagesPath = “images/”;//图片路径
var delayBetweenIcons = .5;//错开每个图标的动画(以秒为单位)
var useRollover = true;//翻转动画
var hoverScale = 1.2;//翻转时图标增长多少
var speed = 1;//加速或减速动画(1为正常速度)
var playOnStart = true;//在页面加载时播放动画
流畅的 Javascript 动画
这里没有 Flash 或动画 GIF 元素。您看到的所有动画都是 100% Javascript,不需要任何浏览器插件。
这个项目使用 Greensock 的 TweenMax 来制作动画,而不是 jQuery。为什么?因为 GSAP 更快更流畅。自己看看:jQuery vs GSAP 速度测试。
免费平面图标
如果你只想要图标(不是动画),你可以在 GraphicBurger 免费获得它们。