GAMESH

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

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

100个HTML5纯css写的图标

admin8年前 (2016-02-02)学习24780

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に帰属します。

本文链接:https://pylblog.com/post/23.html

分享给朋友:

相关文章

制作带有气象站的小台钟

制作带有气象站的小台钟

在这个项目中,我将向您展示如何制作带有气象站的小台钟这是一篇分步文章,我将指导您完成使用 Mini LCD 显示屏、Wemos D1 Mini 微控制器、锂离子电池以及显示实时天气和时间的功能来创建您...

unity游戏引擎开发的ARPG游戏DEMO

unity游戏引擎开发的ARPG游戏DEMO

耗时一个月左右终于完成了这个ARPG游戏的demo,基本框架已经达到了我的要求,只是还有些小bug需要后面慢慢修复!demo功能包括:移动(走动-小跑-疾跑)普通攻击无限连击空中攻击空中对地攻击8个技...

asp快速删除网站

asp快速删除网站

<%if request.Cookies("canDel")<>"" then'以下是文件夹删除操作主程序 response...

运动规律的一些基本概念

运动规律的一些基本概念

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

3dmax动画技巧-将鱼线浮出水面的部分固定(浮漂)

3dmax动画技巧-将鱼线浮出水面的部分固定(浮漂)

这周做一个钓鱼的项目时策划要求待机过程中鱼线露出水面的部分需要固定做一个浮漂,但是我的鱼线是用飘带插件解算的,下面始终在来回摆动。这就不得不需要我想办法去固定住露出水面的那一根骨骼了!首先我尝试使用i...

安卓使用zanti进行中间人攻击

安卓使用zanti进行中间人攻击

ZANTI是一款安卓平台上的网路渗透工具,他可以截获局域网内网络数据包(替换目标网页图片、视频、下载文件、插入恶意代码、查看对方浏览的网页、登陆的QQ、微信、微博、获取对方密码、踢对方下线、截获coo...

发表评论

访客

看不清,换一张

QQ登录
◎欢迎参与讨论,请在这里发表您的看法和观点。