纯css3手机页面图标样式代码
2016-01-21 17:59
148 查看
全部图标：http://hovertree.com/texiao/css/19/
先看效果：
ViewCode
几个游戏：见缝插针坦克小游戏坦克小游戏2切水果五子棋走出迷宫消灭僵尸钓鱼
转自：http://hovertree.com/h/bjaf/css3icon.htm
更多：/article/6453322.html
先看效果：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>纯CSS3图标-何问起</title>
<linkrel="stylesheet"href="http://hovertree.com/texiao/css/19/hoverkicon.css">
<styletype="text/css">
body{
background-color:#555;
text-align:center;color:#eeeeee;
}
div{
text-align:left;
}
span{
display:inline-block;
margin:20px;
border:1pxsolid#666;
padding:20px;
position:relative;
}
span:before,span:after{
content:"";
background-color:#777;
position:absolute;
}
span:after{
width:20px;
height:1px;
bottom:-20px;
right:-32px;
}
span:before{
height:17px;
width:1px;
bottom:-28px;
right:-23px;
}
spani[class*="icono"]{
color:#bbb;
transition:all0.2s;
}
span:hoveri{
color:#fff;
}
a{
color:#eee;
}
</style>
</head>
<body>
<div>
<h2>纯css3手机页面图标样式代码</h2>
<ahref="http://hovertree.com/texiao/css/19/hoverkico.htm">使用方法</a><ahref="http://hovertree.com/h/bjaf/css3icon.htm">原文</a><ahref="http://hovertree.com/">首页</a><ahref="http://hovertree.com/texiao/">特效</a>
<br/>效果如下：
</div>
<div>
</div>
<div>
<span><iclass="icono-icono"></i></span>
<!--
-->
<span><iclass="icono-mail"></i></span>
<!--
-->
<span><iclass="icono-mail"></i></span>
<!--
-->
<span><iclass="icono-rss"></i></span>
<!--
-->
<span><iclass="icono-hamburger"></i></span>
<!--
-->
<span><iclass="icono-plus"></i></span>
<!--
-->
<span><iclass="icono-cross"></i></span>
<!--
-->
<span><iclass="icono-check"></i></span>
<!--
-->
<span><iclass="icono-power"></i></span>
<!--
-->
<span><iclass="icono-heart"></i></span>
<!--
-->
<span><iclass="icono-infinity"></i></span>
<!--
-->
<span><iclass="icono-flag"></i></span>
<!--
-->
<span><iclass="icono-file"></i></span>
<!--
-->
<span><iclass="icono-image"></i></span>
<!--
-->
<span><iclass="icono-video"></i></span>
<!--
-->
<span><iclass="icono-music"></i></span>
<!--
-->
<span><iclass="icono-headphone"></i></span>
<!--
-->
<span><iclass="icono-document"></i></span>
<!--
-->
<span><iclass="icono-folder"></i></span>
<!--
-->
<span><iclass="icono-pin"></i></span>
<!--
-->
<span><iclass="icono-smile"></i></span>
<!--
-->
<span><iclass="icono-eye"></i></span>
<!--
-->
<span><iclass="icono-sliders"></i></span>
<!--
-->
<span><iclass="icono-share"></i></span>
<!--
-->
<span><iclass="icono-sync"></i></span>
<!--
-->
<span><iclass="icono-reset"></i></span>
<!--
-->
<span><iclass="icono-gear"></i></span>
<!--
-->
<span><iclass="icono-signIn"></i></span>
<!--
-->
<span><iclass="icono-signOut"></i></span>
<!--
-->
<span><iclass="icono-support"></i></span>
<!--
-->
<span><iclass="icono-dropper"></i></span>
<!--
-->
<span><iclass="icono-tiles"></i></span>
<!--
-->
<span><iclass="icono-list"></i></span>
<!--
-->
<span><iclass="icono-chain"></i></span>
<!--
-->
<span><iclass="icono-youtube"></i></span>
<!--
-->
<span><iclass="icono-rename"></i></span>
<!--
-->
<span><iclass="icono-search"></i></span>
<!--
-->
<span><iclass="icono-book"></i></span>
<!--
-->
<span><iclass="icono-forbidden"></i></span>
<!--
-->
<span><iclass="icono-trash"></i></span>
<!--
-->
<span><iclass="icono-keyboard"></i></span>
<!--
-->
<span><iclass="icono-mouse"></i></span>
<!--
-->
<span><iclass="icono-user"></i></span>
<!--
-->
<span><iclass="icono-crop"></i></span>
<!--
-->
<span><iclass="icono-display"></i></span>
<!--
-->
<span><iclass="icono-imac"></i></span>
<!--
-->
<span><iclass="icono-iphone"></i></span>
<!--
-->
<span><iclass="icono-macbook"></i></span>
<!--
-->
<span><iclass="icono-imacBold"></i></span>
<!--
-->
<span><iclass="icono-iphoneBold"></i></span>
<!--
-->
<span><iclass="icono-macbookBold"></i></span>
<!--
-->
<span><iclass="icono-nexus"></i></span>
<!--
-->
<span><iclass="icono-microphone"></i></span>
<!--
-->
<span><iclass="icono-asterisk"></i></span>
<!--
-->
<span><iclass="icono-terminal"></i></span>
<!--
-->
<span><iclass="icono-paperClip"></i></span>
<!--
-->
<span><iclass="icono-market"></i></span>
<!--
-->
<span><iclass="icono-clock"></i></span>
<!--
-->
<span><iclass="icono-textAlignRight"></i></span>
<!--
-->
<span><iclass="icono-textAlignCenter"></i></span>
<!--
-->
<span><iclass="icono-textAlignLeft"></i></span>
<!--
-->
<span><iclass="icono-indent"></i></span>
<!--
-->
<span><iclass="icono-outdent"></i></span>
<!--
-->
<span><iclass="icono-frown"></i></span>
<!--
-->
<span><iclass="icono-meh"></i></span>
<!--
-->
<span><iclass="icono-locationArrow"></i></span>
<!--
-->
<span><iclass="icono-plusCircle"></i></span>
<!--
-->
<span><iclass="icono-checkCircle"></i></span>
<!--
-->
<span><iclass="icono-crossCircle"></i></span>
<!--
-->
<span><iclass="icono-exclamation"></i></span>
<!--
-->
<span><iclass="icono-exclamationCircle"></i></span>
<!--
-->
<span><iclass="icono-comment"></i></span>
<!--
-->
<span><iclass="icono-commentEmpty"></i></span>
<!--
-->
<span><iclass="icono-areaChart"></i></span>
<!--
-->
<span><iclass="icono-pieChart"></i></span>
<!--
-->
<span><iclass="icono-barChart"></i></span>
<!--
-->
<span><iclass="icono-bookmark"></i></span>
<!--
-->
<span><iclass="icono-bookmarkEmpty"></i></span>
<!--
-->
<span><iclass="icono-filter"></i></span>
<!--
-->
<span><iclass="icono-volume"></i></span>
<!--
-->
<span><iclass="icono-volumeLow"></i></span>
<!--
-->
<span><iclass="icono-volumeMedium"></i></span>
<!--
-->
<span><iclass="icono-volumeHigh"></i></span>
<!--
-->
<span><iclass="icono-volumeDecrease"></i></span>
<!--
-->
<span><iclass="icono-volumeIncrease"></i></span>
<!--
-->
<span><iclass="icono-volumeMute"></i></span>
<!--
-->
<span><iclass="icono-tag"></i></span>
<!--
-->
<span><iclass="icono-calendar"></i></span>
<!--
-->
<span><iclass="icono-camera"></i></span>
<!--
-->
<span><iclass="icono-piano"></i></span>
<!--
-->
<span><iclass="icono-ruler"></i></span>
<!--
-->
<span><iclass="icono-cup"></i></span>
<!--
-->
<span><iclass="icono-creditCard"></i></span>
<!--
-->
<span><iclass="icono-facebook"></i></span>
<!--
-->
<span><iclass="icono-twitter"></i></span>
<!--
-->
<span><iclass="icono-gplus"></i></span>
<!--
-->
<span><iclass="icono-linkedIn"></i></span>
<!--
-->
<span><iclass="icono-instagram"></i></span>
<!--
-->
<span><iclass="icono-flickr"></i></span>
<!--
-->
<span><iclass="icono-delicious"></i></span>
<!--
-->
<span><iclass="icono-codepen"></i></span>
<!--
-->
<span><iclass="icono-blogger"></i></span>
<!--
-->
<span><iclass="icono-play"></i></span>
<!--
-->
<span><iclass="icono-pause"></i></span>
<!--
-->
<span><iclass="icono-stop"></i></span>
<!--
-->
<span><iclass="icono-rewind"></i></span>
<!--
-->
<span><iclass="icono-forward"></i></span>
<!--
-->
<span><iclass="icono-next"></i></span>
<!--
-->
<span><iclass="icono-previous"></i></span>
<!--
-->
<span><iclass="icono-caretRight"></i></span>
<!--
-->
<span><iclass="icono-caretLeft"></i></span>
<!--
-->
<span><iclass="icono-caretUp"></i></span>
<!--
-->
<span><iclass="icono-caretDown"></i></span>
<!--
-->
<span><iclass="icono-rightArrow"></i></span>
<!--
-->
<span><iclass="icono-leftArrow"></i></span>
<!--
-->
<span><iclass="icono-upArrow"></i></span>
<!--
-->
<span><iclass="icono-downArrow"></i></span>
<!--
-->
<span><iclass="icono-sun"></i></span>
<!--
-->
<span><iclass="icono-moon"></i></span>
<!--
-->
<span><iclass="icono-disqus"></i></span>
<!--
-->
<span><iclass="icono-cart"></i></span>
<!--
-->
<span><iclass="icono-caretRightCircle"></i></span>
<!--
-->
<span><iclass="icono-caretLeftCircle"></i></span>
<!--
-->
<span><iclass="icono-caretUpCircle"></i></span>
<!--
-->
<span><iclass="icono-caretDownCircle"></i></span>
<!--
-->
<span><iclass="icono-caretRightSquare"></i></span>
<!--
-->
<span><iclass="icono-caretLeftSquare"></i></span>
<!--
-->
<span><iclass="icono-caretUpSquare"></i></span>
<!--
-->
<span><iclass="icono-caretDownSquare"></i></span>
<!--
-->
<span><iclass="icono-dribbble"></i></span>
<!--
-->
<span><iclass="icono-sitemap"></i></span>
<!--
-->
<span><iclass="icono-circle"></i></span>
<!--
-->
<span><iclass="icono-ellipsis"></i></span>
<!--
-->
<span><iclass="icono-spinnerspinstep"></i></span>
<!--
-->
<span><iclass="icono-bluetooth"></i></span>
<!--
-->
<br>
</div>
</body>
</html>ViewCode
几个游戏：
转自：
更多：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS @font-face(CSS 自定义字体)
- CSS---各种分割线
- css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别
- 一个TextView实现不同部分添加不同样式
- （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器
- CSS中!important的使用 转
- CSS文本对齐text-align详解
- CSS3阴影 box-shadow的使用和技巧总结
- Make a website all about you.
- CSS 的overflow:hidden (清除浮动)
- css居中
- Dom2(页面加载事件,标签样式,刷新)
- 小三角如何实现--css-before-after
- SASS和SCSS
- 最全的CSS浏览器兼容问题
- CSS实现输入框的高亮效果-------Day50
- CSS line-height
- CSS禁止文字选择user-select应用
- css样式中font属性的简写规则
- HTML+CSS慕课网学习总结（一）