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

Posted 2020-07-01

这是一组基于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