全部圖標: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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>純CSS3郵件、旗幟、音樂、文件和眼睛的圖標 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css">
<style>a{color:blue}</style>
</head>
<body>
<div><h2>純css3手機頁面圖標樣式代碼</h2>
<a href="http://hovertree.com/texiao/css/19/">更多圖標</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><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>
</body>
</html>