150 SVG flat style icons with animation effects and 150 svg Animation

150 SVG flat style icons with animation effects and 150 svg Animation

This is a set of exquisite animated icons Based on SVG. There are 150 icons in this group, which are divided into 6 categories. These icons are flat-style icons, some of which also have long shadow effects, and all the icons have certain animation effects when the mouse slides over.

Usage

Download Online Preview source code

HTML Structure

These SVG icons use<span>The element is used as a container and jQuery is used to dynamically Add the SVG table signature. For example, the HTML code of the browser icon is:

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

JavaScript

In this DEMO, the code of the SVG icon is dynamically added using jQuery. You can also add the SVG Code directly<span>Container.

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 style

The animation effect of the SVG icon is completed through CSS. The following code does not use the prefix of Each browser vendor.

# Filled-browser. green {fill: # FFF} # filled-browser. orange {fill: # FFF} # filled-browser. red {fill: # FFF}/* modify the browser color when the mouse slides out */# 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}/* mouse sliding out-of-date browser animation */# filled-browser: hover. screen {animation-delay: 0.2 s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: left;} # filled-browser: hover. base {animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: right;} # filled-browser: hover. top {animation-delay: 0.1 s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: right-top;} # filled-browser: hover. green {animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: left-top;} # filled-browser: hover. orange {animation-delay: 0.05 s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: left-top;} # filled-browser: hover. red {animation-timing-function: linear; transform-origin: 50% 50%; animation-duration :. 4 s; animation-name: left-top;}/* Frame animation */@ keyframes left-top {0% {transform: translate (-100px,-100px) scale (1%)} 100% {transform: translate (-100px,-100px) scale ()} {transform: translate (0px, 0px) scale )}} @ keyframes right-top {0% {transform: translate (100px,-200px) scale (1%)} {transform: translate (100px,-200px) scale )} 100% {transform: translate (0px, 0px) scale (0%) }@keyframes right {1% {transform: translate (100px, 0px)} {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 )}}

For the complete implementation code of each SVG icon, see download files.

Via: http://www.w2bc.com/article/114332