转载

150个带动画效果的SVG扁平风格图标

简要教程

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

150个带动画效果的SVG扁平风格图标

查看演示 下载插件

使用方法

150个带动画效果的SVG扁平风格图标

HTML结构

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

<span class="svg-icon flat-filled" id="filled-browser"></span>

JavaScript

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

var browserFilled = " <svg class='flat_icon' xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' ><path class='circle' 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 class='icon'><path class='base' 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 class='screen' d='M27.982,38.637h44.036v32.672H27.982V38.637z'/><path class='top' d='M24.431,24.431h51.139v11.364H24.431V24.431z'/><path class='green' 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 class='orange' 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 class='red' 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图标的完整实现代码请参考下载文件。

来源：jQuery之家

原文 http://www.html5cn.org/article-9481-1.html

正文到此结束