150個帶動畫效果的SVG扁平風格圖標

這是一組基於SVG製作的精美動畫圖標。這組圖標共150個，分為6大類。這些圖標都是扁平風格的圖標，有一些還帶有長陰影效果，所有的圖標在滑鼠滑過時都帶有一定的動畫效果。

 使用方法

線上預覽    源碼下載

 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圖標的完整實現代碼請參考下載文件。

via：http://www.w2bc.com/article/114332