150个带动画效果的SVG扁平风格图标 - 爱上程序猿_H5之家

这是一组基于SVG制作的精美动画图标。这组图标共150个，分为6大类。这些图标都是扁平风格的图标，有一些还带有长阴影效果，所有的图标在鼠标滑过时都带有一定的动画效果。

使用方法

在线预览源码下载

HTML结构

这些SVG图标都使用<span>元素作为容器，通过jQuery来动态添加SVG表签。例如浏览器图标的HTML代码为：

JavaScript

在这个DEMO中，SVG图标的代码都是通过jQuery来动态添加的。你也可以将这些SVG代码直接添加到<span>容器中。

var browserFilled = " <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' ><path d='M50,2.125c26.441,0,47.875,21.434,47.875,47.875S76.441,97.875,50,97.875C17.857,97.875,2.125,76.441,2.125,50S23.559,2.125,50,2.125z'/><g><path d='M28.692,24.431h42.615c2.353,0,4.262,1.908,4.262,4.262v42.615c0,2.354-1.909,4.262-4.262,4.262H28.692c-2.354,0-4.262-1.908-4.262-4.262V28.692C24.431,26.338,26.339,24.431,28.692,24.431z'/><path d='M27.982,38.637h44.036v32.672H27.982V38.637z'/><path d='M24.431,24.431h51.139v11.364H24.431V24.431z'/><path d='M47.159,27.271c1.57,0,2.841,1.273,2.841,2.841s-1.271,2.841-2.841,2.841c-1.569,0-2.841-1.272-2.841-2.841S45.589,27.271,47.159,27.271z'/><path d='M38.344,27.271c1.569,0,2.841,1.273,2.841,2.841s-1.271,2.841-2.841,2.841s-2.841-1.272-2.841-2.841S36.776,27.271,38.344,27.271z'/><path fill='' d='M29.858,27.271c1.569,0,2.841,1.273,2.841,2.841s-1.272,2.841-2.841,2.841c-1.569,0-2.841-1.272-2.841-2.841S28.289,27.271,29.858,27.271z'/></g></svg>" $(browserFilled).appendTo('#filled-browser');

CSS样式

SVG图标的动画效果通过CSS来完成。下面的代码中没有使用各个浏览器厂商的前缀。

#filled-browser .green { fill: #FFF } #filled-browser .orange { fill: #FFF } #filled-browser .red { fill: #FFF } #filled-browser:hover .circle { fill: #B1EB5B } #filled-browser:hover .screen { fill: #d6d6d6 } #filled-browser:hover .base { fill: #b0b0b0 } #filled-browser:hover .top { fill: #8F8F8F } #filled-browser:hover .green { fill: #AEE42D } #filled-browser:hover .orange { fill: #FFD02C } #filled-browser:hover .red { fill: #E64545 } #filled-browser:hover .screen { animation-delay: 0.2s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration: .4s; animation-name: left; } #filled-browser:hover .base { animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration: .4s; animation-name: right; } #filled-browser:hover .top { animation-delay: 0.1s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration: .4s; animation-name: right-top; } #filled-browser:hover .green { animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration: .4s; animation-name: left-top; } #filled-browser:hover .orange { animation-delay: 0.05s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration: .4s; animation-name: left-top; } #filled-browser:hover .red { animation-timing-function: linear; transform-origin: 50% 50%; animation-duration: .4s; animation-name: left-top; } @keyframes left-top { 0% { transform: translate(-100px, -100px) scale(3,3) } 1% { transform: translate(-100px, -100px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @keyframes right-top { 0% { transform: translate(100px, -200px) scale(3,3) } 1% { transform: translate(100px, -200px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @keyframes right { 0% { transform: translate(100px, 0px) } 1% { transform: translate(100px, 0px) } 100% { transform: translate(0px, 0px) } } @keyframes left { 0% { transform: translate(-100px, 0px) } 1% { transform: translate(-100px, 0px) } 100% { transform: translate(0px, 0px) } }

各个SVG图标的完整实现代码请参考下载文件。

via：