你的位置:首页 > 网页设计

[网页设计]纯css3手机页面图标样式代码


全部图标:http://hovertree.com/texiao/css/19/

先看效果:

css图标

或者点这里: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>

View Code
 

几个游戏:见缝插针 坦克小游戏 坦克小游戏2 切水果 五子棋 走出迷宫 消灭僵尸 钓鱼

转自:http://hovertree.com/h/bjaf/css3icon.htm

更多:http://www.cnblogs.com/roucheng/p/texiao.html