GAMESH

游戏美术动画unity资源搬运工!

剧情党,完美控!
桐崎千棘
当前位置:首页 > 学习 > 正文内容

100个HTML5纯css写的图标

admin5年前 (2016-02-02)学习5090

width:0 12px 0 6px;border-style:solid;bottom:0;left:0}.icono-comment{width:30px;height:20px;box-shadow:inset 0 0 0 32px;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;margin:5px 2px 9px}.icono-comment:before{position:absolute;width:8px;height:8px;box-shadow:inset 0 0 0 32px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);bottom:-4px;left:6px}.icono-areaChart,.icono-barChart{width:30px;height:22px;border-top-width:0;border-right-width:0;border-color:transparent;box-shadow:-2px 2px;overflow:hidden;margin:4px 0 8px 4px}.icono-areaChart:before{position:absolute;left:0;bottom:7px;border:6px solid transparent;border-bottom-color:currentColor;box-shadow:0 7px}.icono-areaChart:after{position:absolute;left:11px;bottom:4px;border-width:0 6px 13px;border-style:solid;border-color:transparent;border-bottom-color:currentColor;box-shadow:0 4px}.icono-barChart{border-color:transparent;box-shadow:-2px 2px;margin:4px 0 8px 4px}.icono-barChart:before{position:absolute;left:0;bottom:0;width:4px;height:15px;box-shadow:inset 0 -8px 0 0,6px 0,12px 7px,18px 5px}.icono-pieChart{width:0;height:0;border:15px solid;border-right-color:transparent;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);margin:2px}.icono-pieChart:before{position:absolute;width:0;height:0;left:-11px;top:-14px;border:14px solid;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}.icono-bookmark{width:0;height:0;border:9px solid;border-bottom-color:transparent;box-shadow:0 -4px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;margin:10px 8px 6px}.icono-bookmarkEmpty{width:18px;height:22px;border-bottom:none;-webkit-border-radius:3px 3px 2px 2px;-moz-border-radius:3px 3px 2px 2px;-o-border-radius:3px 3px 2px 2px;border-radius:3px 3px 2px 2px;overflow:hidden;margin:6px 8px}.icono-bookmarkEmpty:before{position:absolute;width:12px;height:12px;bottom:0;left:0;border-right:none;border-bottom:none;-webkit-transform:rotate(45deg) translate(35%, 35%);-moz-transform:rotate(45deg) translate(35%, 35%);-ms-transform:rotate(45deg) translate(35%, 35%);-o-transform:rotate(45deg) translate(35%, 35%);transform:rotate(45deg) translate(35%, 35%)}.icono-filter{width:0;height:0;border:10px solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;padding:3px;box-shadow:inset 0 7px;margin:9px 4px}.icono-volume,.icono-volumeLow,.icono-volumeDecrease,.icono-volumeMedium,.icono-volumeIncrease,.icono-volumeHigh,.icono-volumeMute{width:0;height:0;border:7px solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;padding:6px 3px;box-shadow:inset 4px 0;margin:4px 10px 4px 11px}.icono-volumeLow,.icono-volumeMedium,.icono-volumeHigh{margin:4px 14px 4px 7px}.icono-volumeLow:before,.icono-volumeMedium:before,.icono-volumeHigh:after,.icono-volumeHigh:before{width:15px;height:15px;position:absolute;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;left:2px}.icono-volumeMedium,.icono-volumeHigh{margin:4px 16px 4px 5px}.icono-volumeMedium:before,.icono-volumeHigh:before{border-style:double;border-width:6px;left:-2px}.icono-volumeHigh{margin:4px 18px 4px 3px}.icono-volumeHigh:after{width:32px;height:32px;left:-7px}.icono-volumeDecrease,.icono-volumeIncrease,.icono-volumeMute{margin:4px 16px 4px 5px}.icono-volumeDecrease:before,.icono-volumeDecrease:after,.icono-volumeIncrease:before,.icono-volumeIncrease:after,.icono-volumeMute:before,.icono-volumeMute:after{box-shadow:inset 0 0 0 32px}.icono-volumeDecrease:before,.icono-volumeIncrease:before,.icono-volumeMute:before{width:10px;height:2px;left:17px}.icono-volumeIncrease:after,.icono-volumeMute:after{height:10px;width:2px;left:21px}.icono-volumeMute:after,.icono-volumeMute:before{-webkit-transform:translateY(-50%) rotate(45deg);-moz-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);-o-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.icono-tag{width:18px;height:24px;-webkit-border-radius:6px 6px 4px 4px;-moz-border-radius:6px 6px 4px 4px;-o-border-radius:6px 6px 4px 4px;border-radius:6px 6px 4px 4px;border-top:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);margin:5px 8px}.icono-tag:before{position:absolute;top:-4px;left:1px;width:10px;height:10px;border-width:2px 0 0 2px;border-style:solid;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-o-border-radius:5px 0 0 0;border-radius:5px 0 0 0}.icono-tag:after{top:1px;width:3px;height:3px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}.icono-calendar{width:32px;height:28px;border-width:4px 2px 2px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;margin:5px 1px 1px}.icono-calendar:before{position:absolute;width:4px;height:4px;top:3px;left:3px;box-shadow:inset 0 0 0 32px,6px 0,12px 0,18px 0,0 6px,6px 6px,12px 6px,18px 6px,0 12px,6px 12px,12px 12px,18px 12px}.icono-calendar:after{position:absolute;width:4px;height:8px;box-shadow:inset 0 0 0 32px,16px 0;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;top:-8px;left:4px}.icono-camera{width:32px;height:24px;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;margin:5px 1px}.icono-camera:before{width:10px;height:10px;border:1px solid transparent;box-shadow:inset 0 0 0 1px,0 0 0 2px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}.icono-camera:after{position:absolute;width:4px;height:2px;right:2px;top:2px;box-shadow:inset 0 0 0 32px}.icono-piano{width:28px;height:22px;margin:6px 3px}.icono-piano:before{position:absolute;left:4px;top:0;width:1px;height:100%;box-shadow:inset 0 0 0 32px,5px 0,10px 0,15px 0}.icono-piano:after{position:absolute;width:3px;height:12px;left:3px;top:0;box-shadow:inset 0 0 0 32px,5px 0,10px 0,15px 0}.icono-ruler{width:27px;height:12px;margin:11px 4px 11px 3px}.icono-ruler:before{position:absolute;width:1px;height:4px;box-shadow:inset 0 0 0 32px,6px 0,12px 0;left:5px;top:0}.icono-ruler:after{position:absolute;width:1px;height:2px;box-shadow:inset 0 0 0 32px,2px 0,6px 0,8px 0,12px 0,14px 0,18px 0,20px 0;left:1px;top:0}.icono-facebook{width:9px;height:26px;box-shadow:inset 2px 4px 0 0;border-left:3px solid;-webkit-border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-o-border-radius:5px 0 0 0;border-radius:5px 0 0 0;margin:4px 11px 4px 14px}.icono-facebook:before{position:absolute;top:9px;left:-6px;width:11px;height:0;border-top:4px solid;border-right:1px solid transparent}.icono-twitter{width:14px;height:23px;-webkit-border-radius:0 0 0 8px;-moz-border-radius:0 0 0 8px;-o-border-radius:0 0 0 8px;border-radius:0 0 0 8px;box-shadow:-6px 2px 0 0;margin:4px 7px 7px 13px}.icono-twitter:before{position:absolute;bottom:-2px;left:-6px;width:17px;height:6px;-webkit-border-radius:0 0 0 8px;-moz-border-radius:0 0 0 8px;-o-border-radius:0 0 0 8px;border-radius:0 0 0 8px;box-shadow:inset 4px -6px,0 -11px}.icono-twitter:after{position:absolute;width:6px;height:6px;box-shadow:inset 0 0 0 32px,13px 8px,13px 19px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;left:-6px}.icono-linkedIn{width:5px;height:16px;box-shadow:inset 0 0 0 32px,8px 0;margin:12px 24px 6px 5px}.icono-linkedIn:before{position:absolute;width:5px;height:5px;box-shadow:inset 0 0 0 32px;top:-7px;left:0;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}.icono-linkedIn:after{position:absolute;width:12px;height:16px;border-right:1px solid;left:11px;bottom:0;-webkit-border-radius:8px 5px 0 0 / 11px 5px 0 0;-moz-border-radius:8px 5px 0 0 / 11px 5px 0 0;-o-border-radius:8px 5px 0 0 / 11px 5px 0 0;border-radius:8px 5px 0 0 / 11px 5px 0 0;box-shadow:inset -4px 4px}.icono-instagram{width:26px;height:26px;box-shadow:inset 0 0 0 2px;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;margin:5px}.icono-instagram:before{width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;box-shadow:0 0 0 3px}.icono-instagram:after{position:absolute;width:5px;height:5px;-webkit-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;border-radius:1px;right:3px;top:3px;box-shadow:0 0 0 2px,1px 1px 0 2px,-5px -1px 0 1px,-10px -1px 0 1px,-16px 1px 0 2px}.icono-flickr{width:24px;height:24px;overflow:hidden;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;margin:5px}.icono-flickr:before,.icono-flickr:after{width:7px;height:7px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}.icono-flickr:before{left:4px;box-shadow:0 0 0 1px,0 -10px 0 6px,0 10px 0 6px,-4px 0 0 3px}.icono-flickr:after{right:4px;box-shadow:0 0 0 1px,0 -10px 0 6px,0 10px 0 6px,4px 0 0 3px}.icono-delicious{width:24px;height:24px;overflow:hidden;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;box-shadow:inset 0 0 0 2px;margin:5px}.icono-delicious:before{position:absolute;width:12px;height:12px;box-shadow:inset 0 0 0 32px,12px -12px 0 0;left:0;bottom:0}.icono-codepen{width:2px;height:10px;box-shadow:inset 0 0 0 32px,0 15px,-11px 7px,11px 7px;margin:4px 16px 20px}.icono-codepen:before{position:absolute;right:2px;top:3px;width:11px;height:4px;transform:skew(0, -35deg) scaleY(.6);box-shadow:inset 0 0 0 32px,0 13px,11px 26px,12px 39px}.icono-codepen:after{position:absolute;left:2px;top:3px;width:11px;height:4px;transform:skew(0, 35deg) scaleY(.6);box-shadow:inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px}.icono-blogger{width:24px;height:14px;-webkit-border-radius:0 0 7px 7px;-moz-border-radius:0 0 7px 7px;-o-border-radius:0 0 7px 7px;border-radius:0 0 7px 7px;margin:14px 5px 6px}.icono-blogger,.icono-blogger:before{border-width:6px;border-style:solid}.icono-blogger:before{position:absolute;width:8px;height:2px;left:-6px;top:-15px;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-o-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.icono-creditCard{width:32px;height:24px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;margin:4px 0}.icono-creditCard:before{position:absolute;top:4px;width:100%;height:6px;box-shadow:inset 0 0 0 32px}.icono-creditCard:after{left:3px;bottom:3px;position:absolute;width:4px;height:2px;box-shadow:inset 0 0 0 32px,6px 0}.icono-cup{width:22px;height:16px;box-shadow:inset 0 0 0 32px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;margin:6px 6px 12px}.icono-cup:before{position:absolute;right:-3px;top:4px;width:5px;height:5px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;box-shadow:0 0 0 2px}.icono-cup:after{bottom:-5px;width:26px;height:3px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;box-shadow:inset 0 0 0 32px}[class*="icono-"]{display:inline-block;vertical-align:middle;position:relative;font-style:normal;color:#ddd;text-align:left;text-indent:-9999px;direction:ltr}[class*="icono-"]:before,[class*="icono-"]:after{content:'';pointer-events:none}[class*="icono-"][class*="Circle"]{-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}[class*="icono-"],[class*="icono-"] *{box-sizing:border-box}

扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由GAMESH发布,如需转载请注明出处。

分享给朋友:

相关文章

运动规律的一些基本概念

运动规律的一些基本概念

动画片中的活动形象,不象其它影片那样,用胶片直接拍摄客观物体的运动,而是通过对客观物体运动的观察、分析、研究,用动画片的表现手法(主要是夸张、强调动作过中的某些方面),一张张地画出来,一格格地拍出来,...

unity3d模型导入动画变形

unity3d模型导入动画变形

 unity3d中遇到模型导入出现变形问题,从max导出fbx文件放到unity里面出现角色缩成一团,之前由于绑定时没注意max的场景尺寸,所以缩放过场景由于只更改了skin文件,所以后面骨...

全国大学生益智节目题库

全国大学生益智节目题库

一分钟快问快答:清华大学一:人被生锈的钢钉扎破脚后,注射破伤风抗毒素即可避免破伤风,这属于什么免疫?(人工被动免疫)二:2011 年 4 月 12 日发生的福岛核电站事故被定为几级事故?(7 级)三:...

3dmax 删除particle view

3dmax 删除particle view

 今天在unity里面导入模型时转换Humanoid模式时特别慢,然后我发现这个模型里面带有一千多个particle view ,然后我进入3dmax但是按H看不到任何particle vi...

独立游戏开发者—我们开发游戏不是为了混饭吃

独立游戏开发者—我们开发游戏不是为了混饭吃

在GGJ之前我不知道中国有这么多和我一样对独立游戏痴迷的人,仅仅几天时间我找到了一大堆好基友!我们大部分都是在游戏公司上班的,在公司我们为了找口饭吃不得不对上面“低头”,做着那些自己看来很无趣的游戏!...

unity制作2d横板过关demo

unity制作2d横板过关demo

unity制作的一款2d横板游戏demo,目前只是做着玩只有一关素材来源于网络!   有兴趣的可以下载来体验一下地址:https://www.pylblog.com/up...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。