纯css3手机页面图标样式代码
全部图标：http://hovertree.com/texiao/css/19/
先看效果：
或者点这里：http://hovertree.com/texiao/css/19/hoverkico.htm
简洁代码如下：
<link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css">
<div><i class="icono-mail"></i>
<i class="icono-flag"></i>
<i class="icono-music"></i>
<i class="icono-file"></i>
<i class="icono-eye"></i></div>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3图标 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css">
<style type="text/css">
body {
background-color: #555;
text-align: center;color:#eeeeee;
} div {
text-align: left;
} span {
display: inline-block;
margin: 20px;
border: 1px solid #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;
} span i[class*="icono"] {
color: #bbb;
transition: all 0.2s;
} span:hover i {
color: #fff;
} a {
color: #eee;
}
</style>
</head>
<body> <div>
<h2>纯css3手机页面图标样式代码</h2>
<a href="http://hovertree.com/texiao/css/19/hoverkico.htm">使用方法</a> <a href="http://hovertree.com/h/bjaf/css3icon.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<br />效果如下：
</div>
<div>
</div>
<div>
<span><i class="icono-icono"></i></span>
<!--
-->
<span><i class="icono-mail"></i></span>
<!--
-->
<span><i class="icono-mail"></i></span>
<!--
-->
<span><i class="icono-rss"></i></span>
<!--
-->
<span><i class="icono-hamburger"></i></span>
<!--
-->
<span><i class="icono-plus"></i></span>
<!--
-->
<span><i class="icono-cross"></i></span>
<!--
-->
<span><i class="icono-check"></i></span>
<!--
-->
<span><i class="icono-power"></i></span>
<!--
-->
<span><i class="icono-heart"></i></span>
<!--
-->
<span><i class="icono-infinity"></i></span>
<!--
-->
<span><i class="icono-flag"></i></span>
<!--
-->
<span><i class="icono-file"></i></span>
<!--
-->
<span><i class="icono-image"></i></span>
<!--
-->
<span><i class="icono-video"></i></span>
<!--
-->
<span><i class="icono-music"></i></span>
<!--
-->
<span><i class="icono-headphone"></i></span>
<!--
-->
<span><i class="icono-document"></i></span>
<!--
-->
<span><i class="icono-folder"></i></span>
<!--
-->
<span><i class="icono-pin"></i></span>
<!--
-->
<span><i class="icono-smile"></i></span>
<!--
-->
<span><i class="icono-eye"></i></span>
<!--
-->
<span><i class="icono-sliders"></i></span>
<!--
-->
<span><i class="icono-share"></i></span>
<!--
-->
<span><i class="icono-sync"></i></span>
<!--
-->
<span><i class="icono-reset"></i></span>
<!--
-->
<span><i class="icono-gear"></i></span>
<!--
-->
<span><i class="icono-signIn"></i></span>
<!--
-->
<span><i class="icono-signOut"></i></span>
<!--
-->
<span><i class="icono-support"></i></span>
<!--
-->
<span><i class="icono-dropper"></i></span>
<!--
-->
<span><i class="icono-tiles"></i></span>
<!--
-->
<span><i class="icono-list"></i></span>
<!--
-->
<span><i class="icono-chain"></i></span>
<!--
-->
<span><i class="icono-youtube"></i></span>
<!--
-->
<span><i class="icono-rename"></i></span>
<!--
-->
<span><i class="icono-search"></i></span>
<!--
-->
<span><i class="icono-book"></i></span>
<!--
-->
<span><i class="icono-forbidden"></i></span>
<!--
-->
<span><i class="icono-trash"></i></span>
<!--
-->
<span><i class="icono-keyboard"></i></span>
<!--
-->
<span><i class="icono-mouse"></i></span>
<!--
-->
<span><i class="icono-user"></i></span>
<!--
-->
<span><i class="icono-crop"></i></span>
<!--
-->
<span><i class="icono-display"></i></span>
<!--
-->
<span><i class="icono-imac"></i></span>
<!--
-->
<span><i class="icono-iphone"></i></span>
<!--
-->
<span><i class="icono-macbook"></i></span>
<!--
-->
<span><i class="icono-imacBold"></i></span>
<!--
-->
<span><i class="icono-iphoneBold"></i></span>
<!--
-->
<span><i class="icono-macbookBold"></i></span>
<!--
-->
<span><i class="icono-nexus"></i></span>
<!--
-->
<span><i class="icono-microphone"></i></span>
<!--
-->
<span><i class="icono-asterisk"></i></span>
<!--
-->
<span><i class="icono-terminal"></i></span>
<!--
-->
<span><i class="icono-paperClip"></i></span>
<!--
-->
<span><i class="icono-market"></i></span>
<!--
-->
<span><i class="icono-clock"></i></span>
<!--
-->
<span><i class="icono-textAlignRight"></i></span>
<!--
-->
<span><i class="icono-textAlignCenter"></i></span>
<!--
-->
<span><i class="icono-textAlignLeft"></i></span>
<!--
-->
<span><i class="icono-indent"></i></span>
<!--
-->
<span><i class="icono-outdent"></i></span>
<!--
-->
<span><i class="icono-frown"></i></span>
<!--
-->
<span><i class="icono-meh"></i></span>
<!--
-->
<span><i class="icono-locationArrow"></i></span>
<!--
-->
<span><i class="icono-plusCircle"></i></span>
<!--
-->
<span><i class="icono-checkCircle"></i></span>
<!--
-->
<span><i class="icono-crossCircle"></i></span>
<!--
-->
<span><i class="icono-exclamation"></i></span>
<!--
-->
<span><i class="icono-exclamationCircle"></i></span>
<!--
-->
<span><i class="icono-comment"></i></span>
<!--
-->
<span><i class="icono-commentEmpty"></i></span>
<!--
-->
<span><i class="icono-areaChart"></i></span>
<!--
-->
<span><i class="icono-pieChart"></i></span>
<!--
-->
<span><i class="icono-barChart"></i></span>
<!--
-->
<span><i class="icono-bookmark"></i></span>
<!--
-->
<span><i class="icono-bookmarkEmpty"></i></span>
<!--
-->
<span><i class="icono-filter"></i></span>
<!--
-->
<span><i class="icono-volume"></i></span>
<!--
-->
<span><i class="icono-volumeLow"></i></span>
<!--
-->
<span><i class="icono-volumeMedium"></i></span>
<!--
-->
<span><i class="icono-volumeHigh"></i></span>
<!--
-->
<span><i class="icono-volumeDecrease"></i></span>
<!--
-->
<span><i class="icono-volumeIncrease"></i></span>
<!--
-->
<span><i class="icono-volumeMute"></i></span>
<!--
-->
<span><i class="icono-tag"></i></span>
<!--
-->
<span><i class="icono-calendar"></i></span>
<!--
-->
<span><i class="icono-camera"></i></span>
<!--
-->
<span><i class="icono-piano"></i></span>
<!--
-->
<span><i class="icono-ruler"></i></span>
<!--
-->
<span><i class="icono-cup"></i></span>
<!--
-->
<span><i class="icono-creditCard"></i></span>
<!--
-->
<span><i class="icono-facebook"></i></span>
<!--
-->
<span><i class="icono-twitter"></i></span>
<!--
-->
<span><i class="icono-gplus"></i></span>
<!--
-->
<span><i class="icono-linkedIn"></i></span>
<!--
-->
<span><i class="icono-instagram"></i></span>
<!--
-->
<span><i class="icono-flickr"></i></span>
<!--
-->
<span><i class="icono-delicious"></i></span>
<!--
-->
<span><i class="icono-codepen"></i></span>
<!--
-->
<span><i class="icono-blogger"></i></span>
<!--
-->
<span><i class="icono-play"></i></span>
<!--
-->
<span><i class="icono-pause"></i></span>
<!--
-->
<span><i class="icono-stop"></i></span>
<!--
-->
<span><i class="icono-rewind"></i></span>
<!--
-->
<span><i class="icono-forward"></i></span>
<!--
-->
<span><i class="icono-next"></i></span>
<!--
-->
<span><i class="icono-previous"></i></span>
<!--
-->
<span><i class="icono-caretRight"></i></span>
<!--
-->
<span><i class="icono-caretLeft"></i></span>
<!--
-->
<span><i class="icono-caretUp"></i></span>
<!--
-->
<span><i class="icono-caretDown"></i></span>
<!--
-->
<span><i class="icono-rightArrow"></i></span>
<!--
-->
<span><i class="icono-leftArrow"></i></span>
<!--
-->
<span><i class="icono-upArrow"></i></span>
<!--
-->
<span><i class="icono-downArrow"></i></span>
<!--
-->
<span><i class="icono-sun"></i></span>
<!--
-->
<span><i class="icono-moon"></i></span>
<!--
-->
<span><i class="icono-disqus"></i></span>
<!--
-->
<span><i class="icono-cart"></i></span>
<!--
-->
<span><i class="icono-caretRightCircle"></i></span>
<!--
-->
<span><i class="icono-caretLeftCircle"></i></span>
<!--
-->
<span><i class="icono-caretUpCircle"></i></span>
<!--
-->
<span><i class="icono-caretDownCircle"></i></span>
<!--
-->
<span><i class="icono-caretRightSquare"></i></span>
<!--
-->
<span><i class="icono-caretLeftSquare"></i></span>
<!--
-->
<span><i class="icono-caretUpSquare"></i></span>
<!--
-->
<span><i class="icono-caretDownSquare"></i></span>
<!--
-->
<span><i class="icono-dribbble"></i></span>
<!--
-->
<span><i class="icono-sitemap"></i></span>
<!--
-->
<span><i class="icono-circle"></i></span>
<!--
-->
<span><i class="icono-ellipsis"></i></span>
<!--
-->
<span><i class="icono-spinner spin step"></i></span>
<!--
-->
<span><i class="icono-bluetooth"></i></span>
<!--
-->
<br>
</div>
</body>
</html>
几个游戏：见缝插针 坦克小游戏 坦克小游戏2 切水果 五子棋 走出迷宫 消灭僵尸 钓鱼
转自：http://hovertree.com/h/bjaf/css3icon.htm
更多：http://www.cnblogs.com/roucheng/p/texiao.html
纯css3手机页面图标样式代码的更多相关文章
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- 【CSS3】纯CSS3制作页面切换效果
此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 纯CSS3实现漂亮的价格表样式代码
分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main" ...
随机推荐
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- 3dmax模型制作备忘录
md2导出: http://thegreystudios.com/blog/?p=278 http://wenku.baidu.com/view/4d5652e2524de518964b7d89.ht ...
- 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上,因此需要确保您是否掌握了上一节的内容.本章的目标是在今天学习结束时利用最佳实践解决方案创建一个小型的MV ...
- hudson部署过程
hudson部署过程: java安装 http://developer.51cto.com/art/201504/470683.htm tomcat安装 http://blog.csdn.net/hu ...
- 在usercontrol里实现导航
(Application.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/NewContent.xaml&qu ...
- IOS数据存储之归档/解档
前言: 前天学习了NSUserDefaults,我们知道NSUserDefaults不能保存自定义对象,所以我们今天来认识一下归档(NSKeyedArchiver)和解档(NSKeyedUnarchi ...
- Java多线程系列目录(共43篇)
最近,在研究Java多线程的内容目录,将其内容逐步整理并发布. (一) 基础篇 01. Java多线程系列--“基础篇”01之 基本概念 02. Java多线程系列--“基础篇”02之 常用的实现多线 ...
- 1Z0-053 争议题目解析701
1Z0-053 争议题目解析701 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 701.A user receives the following error while per ...
- HTML5 音频 <audio>
HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...
- C语言实现控制台中光标随意移动
开始准备学习下C,新手哦~~ 今天弄了个控制台程序,光标可以随意在DOS下移动~~ 先放一张效果图,不过很丑,大家能不能看懂,哈哈,就是 I Love You. 代码注释都有,其实好多东西我都是从其他 ...