Maison >interface Web >tutoriel HTML >纯css3手机页面图标样式代码_html/css_WEB-ITnose
纯css3手机页面图标样式代码_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:28:391553parcourir
全部图标：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 切水果 五子棋 走出迷宫 消灭僵尸 钓鱼
转自：http://hovertree.com/h/bjaf/css3icon.htm
更多：
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：使用float属性布局时父元素高度不能自适应的解决方法_html/css_WEB-ITnoseArticle suivant：iframe标签 父子页面传值_html/css_WEB-ITnose