web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
图像/媒体
150个带动画效果的SVG扁平风格图标
分类:
图像/媒体
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 这些SVG图标都使用span元素作为容器,通过jQuery来动态添加SVG表签。例如浏览器图标的HTML代码为: ```html
``` ##### JavaScript 在这个DEMO中,SVG图标的代码都是通过jQuery来动态添加的。你也可以将这些SVG代码直接添加到span容器中。 ```html var browserFilled = "
" $(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) } } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告