全部图标：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手机页面图标样式代码的更多相关文章

  1. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

  2. 【CSS3】纯CSS3制作页面切换效果

    此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...

  3. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  4. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  5. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  6. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  7. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  9. 纯CSS3实现漂亮的价格表样式代码

    分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main" ...

随机推荐

  1. ReactJS入门（二）—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  2. Box-sizing：小身材，大拳头！

    国庆回来,很久没写博客了.一来是自己毫无时间,二是最近开发任务特别紧,三是节后综合症,脑子一片空白没有找到写作的原材料.今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题.标题的 ...

  3. Guava Supplier实例

    今天想讲一下Guava Suppliers的几点用法.Guava Suppliers的主要功能是创建包裹的单例对象,通过get方法可以获取对象的值.每次获取的对象都为同一个对象,但你和单例模式有所区别 ...

  4. 史上最牛js

    js的功能有多强大,能做到多极致?当然前提是能用,不要搞到需要超级计算器才能运行,那不算. 今天一朋友给我介绍了这个:http://bellard.org/jslinux/ 倒腾了半天后,我只能这么感 ...

  5. Java为何用xml做配置文件？

    在Java世界里xml配置文件几乎是首选,xml有什么好的特性呢? xml能存储小量数据,仅仅是存储数据. xml可以跨平台,主流各种平台都对xml有支持, 真正的跨平台, xml读取速度快. xml ...

  6. 2013 duilib入门简明教程 -- 响应按钮事件(4)

        上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;     也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介 ...

  7. Attribute富文本使用方法

    ★★★Attribut富文本★★★ 在UITextView和UILable的使用中很多的时候会用到富文本. UITextView和UILable的区别在于: ★★★★UITextView 当文字大于一 ...

  8. Nginx与Apache比较

    Nginx特点:高性能epoll 异步非阻塞多个连接(万级别)可以对应一个进程 支持反向代理支持7层负载均衡静态文件.反向代理.前端缓存等处理方便支持高并发连接,每秒最多的并发连接请求理论可以达到 5 ...

  9. hbase 1.1.7在centor6.5安装过程

    1.自己安装的最新版一直没成功,换成了1.1.7稳定版的.中间遇到的问题记录下 1) jdk 用的1.7版本的,安装过程省略. 2)下载hbase  zip包:https://mirrors.tuna ...

  10. jQuery2.0.3源码分析系列之(29) 窗口尺寸

    .height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置 ...