ホームページ > ウェブフロントエンド > htmlチュートリアル > 純粋な css3 モバイル ページ アイコン スタイル code_html/css_WEB-ITnose

純粋な css3 モバイル ページ アイコン スタイル code_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:28:39
オリジナル
1561 人が閲覧しました

すべてのアイコン: 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

その他:

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート