全部图标：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>
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯CSS3图标 - 何问起</title> 6 <link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css"> 7 <style type="text/css"> 8 body { 9 background-color: #555; 10 text-align: center;color:#eeeeee; 11 } 12 13 div { 14 text-align: left; 15 } 16 17 span { 18 display: inline-block; 19 margin: 20px; 20 border: 1px solid #666; 21 padding: 20px; 22 position: relative; 23 } 24 25 span:before, span:after { 26 content: ""; 27 background-color: #777; 28 position: absolute; 29 } 30 31 span:after { 32 width: 20px; 33 height: 1px; 34 bottom: -20px; 35 right: -32px; 36 } 37 38 span:before { 39 height: 17px; 40 width: 1px; 41 bottom: -28px; 42 right: -23px; 43 } 44 45 span i[class*="icono"] { 46 color: #bbb; 47 transition: all 0.2s; 48 } 49 50 span:hover i { 51 color: #fff; 52 } 53 54 a { 55 color: #eee; 56 } 57 </style> 58 </head> 59 <body> 60 61 <div> 62 <h2>纯css3手机页面图标样式代码</h2> 63 <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> 64 <br />效果如下： 65 </div> 66 <div> 67 </div> 68 <div> 69 <span><i class="icono-icono"></i></span> 70 <!-- 71 --> 72 <span><i class="icono-mail"></i></span> 73 <!-- 74 --> 75 <span><i class="icono-mail"></i></span> 76 <!-- 77 --> 78 <span><i class="icono-rss"></i></span> 79 <!-- 80 --> 81 <span><i class="icono-hamburger"></i></span> 82 <!-- 83 --> 84 <span><i class="icono-plus"></i></span> 85 <!-- 86 --> 87 <span><i class="icono-cross"></i></span> 88 <!-- 89 --> 90 <span><i class="icono-check"></i></span> 91 <!-- 92 --> 93 <span><i class="icono-power"></i></span> 94 <!-- 95 --> 96 <span><i class="icono-heart"></i></span> 97 <!-- 98 --> 99 <span><i class="icono-infinity"></i></span> 100 <!-- 101 --> 102 <span><i class="icono-flag"></i></span> 103 <!-- 104 --> 105 <span><i class="icono-file"></i></span> 106 <!-- 107 --> 108 <span><i class="icono-image"></i></span> 109 <!-- 110 --> 111 <span><i class="icono-video"></i></span> 112 <!-- 113 --> 114 <span><i class="icono-music"></i></span> 115 <!-- 116 --> 117 <span><i class="icono-headphone"></i></span> 118 <!-- 119 --> 120 <span><i class="icono-document"></i></span> 121 <!-- 122 --> 123 <span><i class="icono-folder"></i></span> 124 <!-- 125 --> 126 <span><i class="icono-pin"></i></span> 127 <!-- 128 --> 129 <span><i class="icono-smile"></i></span> 130 <!-- 131 --> 132 <span><i class="icono-eye"></i></span> 133 <!-- 134 --> 135 <span><i class="icono-sliders"></i></span> 136 <!-- 137 --> 138 <span><i class="icono-share"></i></span> 139 <!-- 140 --> 141 <span><i class="icono-sync"></i></span> 142 <!-- 143 --> 144 <span><i class="icono-reset"></i></span> 145 <!-- 146 --> 147 <span><i class="icono-gear"></i></span> 148 <!-- 149 --> 150 <span><i class="icono-signIn"></i></span> 151 <!-- 152 --> 153 <span><i class="icono-signOut"></i></span> 154 <!-- 155 --> 156 <span><i class="icono-support"></i></span> 157 <!-- 158 --> 159 <span><i class="icono-dropper"></i></span> 160 <!-- 161 --> 162 <span><i class="icono-tiles"></i></span> 163 <!-- 164 --> 165 <span><i class="icono-list"></i></span> 166 <!-- 167 --> 168 <span><i class="icono-chain"></i></span> 169 <!-- 170 --> 171 <span><i class="icono-youtube"></i></span> 172 <!-- 173 --> 174 <span><i class="icono-rename"></i></span> 175 <!-- 176 --> 177 <span><i class="icono-search"></i></span> 178 <!-- 179 --> 180 <span><i class="icono-book"></i></span> 181 <!-- 182 --> 183 <span><i class="icono-forbidden"></i></span> 184 <!-- 185 --> 186 <span><i class="icono-trash"></i></span> 187 <!-- 188 --> 189 <span><i class="icono-keyboard"></i></span> 190 <!-- 191 --> 192 <span><i class="icono-mouse"></i></span> 193 <!-- 194 --> 195 <span><i class="icono-user"></i></span> 196 <!-- 197 --> 198 <span><i class="icono-crop"></i></span> 199 <!-- 200 --> 201 <span><i class="icono-display"></i></span> 202 <!-- 203 --> 204 <span><i class="icono-imac"></i></span> 205 <!-- 206 --> 207 <span><i class="icono-iphone"></i></span> 208 <!-- 209 --> 210 <span><i class="icono-macbook"></i></span> 211 <!-- 212 --> 213 <span><i class="icono-imacBold"></i></span> 214 <!-- 215 --> 216 <span><i class="icono-iphoneBold"></i></span> 217 <!-- 218 --> 219 <span><i class="icono-macbookBold"></i></span> 220 <!-- 221 --> 222 <span><i class="icono-nexus"></i></span> 223 <!-- 224 --> 225 <span><i class="icono-microphone"></i></span> 226 <!-- 227 --> 228 <span><i class="icono-asterisk"></i></span> 229 <!-- 230 --> 231 <span><i class="icono-terminal"></i></span> 232 <!-- 233 --> 234 <span><i class="icono-paperClip"></i></span> 235 <!-- 236 --> 237 <span><i class="icono-market"></i></span> 238 <!-- 239 --> 240 <span><i class="icono-clock"></i></span> 241 <!-- 242 --> 243 <span><i class="icono-textAlignRight"></i></span> 244 <!-- 245 --> 246 <span><i class="icono-textAlignCenter"></i></span> 247 <!-- 248 --> 249 <span><i class="icono-textAlignLeft"></i></span> 250 <!-- 251 --> 252 <span><i class="icono-indent"></i></span> 253 <!-- 254 --> 255 <span><i class="icono-outdent"></i></span> 256 <!-- 257 --> 258 <span><i class="icono-frown"></i></span> 259 <!-- 260 --> 261 <span><i class="icono-meh"></i></span> 262 <!-- 263 --> 264 <span><i class="icono-locationArrow"></i></span> 265 <!-- 266 --> 267 <span><i class="icono-plusCircle"></i></span> 268 <!-- 269 --> 270 <span><i class="icono-checkCircle"></i></span> 271 <!-- 272 --> 273 <span><i class="icono-crossCircle"></i></span> 274 <!-- 275 --> 276 <span><i class="icono-exclamation"></i></span> 277 <!-- 278 --> 279 <span><i class="icono-exclamationCircle"></i></span> 280 <!-- 281 --> 282 <span><i class="icono-comment"></i></span> 283 <!-- 284 --> 285 <span><i class="icono-commentEmpty"></i></span> 286 <!-- 287 --> 288 <span><i class="icono-areaChart"></i></span> 289 <!-- 290 --> 291 <span><i class="icono-pieChart"></i></span> 292 <!-- 293 --> 294 <span><i class="icono-barChart"></i></span> 295 <!-- 296 --> 297 <span><i class="icono-bookmark"></i></span> 298 <!-- 299 --> 300 <span><i class="icono-bookmarkEmpty"></i></span> 301 <!-- 302 --> 303 <span><i class="icono-filter"></i></span> 304 <!-- 305 --> 306 <span><i class="icono-volume"></i></span> 307 <!-- 308 --> 309 <span><i class="icono-volumeLow"></i></span> 310 <!-- 311 --> 312 <span><i class="icono-volumeMedium"></i></span> 313 <!-- 314 --> 315 <span><i class="icono-volumeHigh"></i></span> 316 <!-- 317 --> 318 <span><i class="icono-volumeDecrease"></i></span> 319 <!-- 320 --> 321 <span><i class="icono-volumeIncrease"></i></span> 322 <!-- 323 --> 324 <span><i class="icono-volumeMute"></i></span> 325 <!-- 326 --> 327 <span><i class="icono-tag"></i></span> 328 <!-- 329 --> 330 <span><i class="icono-calendar"></i></span> 331 <!-- 332 --> 333 <span><i class="icono-camera"></i></span> 334 <!-- 335 --> 336 <span><i class="icono-piano"></i></span> 337 <!-- 338 --> 339 <span><i class="icono-ruler"></i></span> 340 <!-- 341 --> 342 <span><i class="icono-cup"></i></span> 343 <!-- 344 --> 345 <span><i class="icono-creditCard"></i></span> 346 <!-- 347 --> 348 <span><i class="icono-facebook"></i></span> 349 <!-- 350 --> 351 <span><i class="icono-twitter"></i></span> 352 <!-- 353 --> 354 <span><i class="icono-gplus"></i></span> 355 <!-- 356 --> 357 <span><i class="icono-linkedIn"></i></span> 358 <!-- 359 --> 360 <span><i class="icono-instagram"></i></span> 361 <!-- 362 --> 363 <span><i class="icono-flickr"></i></span> 364 <!-- 365 --> 366 <span><i class="icono-delicious"></i></span> 367 <!-- 368 --> 369 <span><i class="icono-codepen"></i></span> 370 <!-- 371 --> 372 <span><i class="icono-blogger"></i></span> 373 <!-- 374 --> 375 <span><i class="icono-play"></i></span> 376 <!-- 377 --> 378 <span><i class="icono-pause"></i></span> 379 <!-- 380 --> 381 <span><i class="icono-stop"></i></span> 382 <!-- 383 --> 384 <span><i class="icono-rewind"></i></span> 385 <!-- 386 --> 387 <span><i class="icono-forward"></i></span> 388 <!-- 389 --> 390 <span><i class="icono-next"></i></span> 391 <!-- 392 --> 393 <span><i class="icono-previous"></i></span> 394 <!-- 395 --> 396 <span><i class="icono-caretRight"></i></span> 397 <!-- 398 --> 399 <span><i class="icono-caretLeft"></i></span> 400 <!-- 401 --> 402 <span><i class="icono-caretUp"></i></span> 403 <!-- 404 --> 405 <span><i class="icono-caretDown"></i></span> 406 <!-- 407 --> 408 <span><i class="icono-rightArrow"></i></span> 409 <!-- 410 --> 411 <span><i class="icono-leftArrow"></i></span> 412 <!-- 413 --> 414 <span><i class="icono-upArrow"></i></span> 415 <!-- 416 --> 417 <span><i class="icono-downArrow"></i></span> 418 <!-- 419 --> 420 <span><i class="icono-sun"></i></span> 421 <!-- 422 --> 423 <span><i class="icono-moon"></i></span> 424 <!-- 425 --> 426 <span><i class="icono-disqus"></i></span> 427 <!-- 428 --> 429 <span><i class="icono-cart"></i></span> 430 <!-- 431 --> 432 <span><i class="icono-caretRightCircle"></i></span> 433 <!-- 434 --> 435 <span><i class="icono-caretLeftCircle"></i></span> 436 <!-- 437 --> 438 <span><i class="icono-caretUpCircle"></i></span> 439 <!-- 440 --> 441 <span><i class="icono-caretDownCircle"></i></span> 442 <!-- 443 --> 444 <span><i class="icono-caretRightSquare"></i></span> 445 <!-- 446 --> 447 <span><i class="icono-caretLeftSquare"></i></span> 448 <!-- 449 --> 450 <span><i class="icono-caretUpSquare"></i></span> 451 <!-- 452 --> 453 <span><i class="icono-caretDownSquare"></i></span> 454 <!-- 455 --> 456 <span><i class="icono-dribbble"></i></span> 457 <!-- 458 --> 459 <span><i class="icono-sitemap"></i></span> 460 <!-- 461 --> 462 <span><i class="icono-circle"></i></span> 463 <!-- 464 --> 465 <span><i class="icono-ellipsis"></i></span> 466 <!-- 467 --> 468 <span><i class="icono-spinner spin step"></i></span> 469 <!-- 470 --> 471 <span><i class="icono-bluetooth"></i></span> 472 <!-- 473 --> 474 <br> 475 </div> 476 </body> 477 </html>
几个游戏：见缝插针 坦克小游戏 坦克小游戏2 切水果 五子棋 走出迷宫 消灭僵尸 钓鱼