你的位置:首页 > 网页设计

[网页设计]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' $(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