当前位置：首页 > 网页特效 > 图像/媒体

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

分类：图像/媒体日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<span class="svg-icon flat-filled" id="filled-browser"></span>    
```        
#####  JavaScript
在这个DEMO中，SVG图标的代码都是通过jQuery来动态添加的。你也可以将这些SVG代码直接添加到span容器中。

```html
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来完成。下面的代码中没有使用各个浏览器厂商的前缀。

```html
#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) }
}          
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果