纯css3⼿机页⾯图标样式代码
<link rel="stylesheet" href="hovertree/texiao/css/19/hoverkicon.css">
icon图标库<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="hovertree/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;
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="hovertree/texiao/css/19/hoverkico.htm">使⽤⽅法</a><a href="hovertree/h/bjaf/css3icon.htm">原⽂</a><a href="hovertree/">⾸页</a><a href="hovertree/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>
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-->
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<!--
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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论