CSS的一些常用样式，如背景、文字、文本、表格、列表等，以及一些常用的场景，如居中对齐、溢出、隐藏元素等。01、常用样式 1.1、background背景 设置元素背景的样式 background，更
纯css3手机页面图标样式代码
顺晟科技
2022-09-13 13:55:01
207
全部图标：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>
View Code
几个游戏：见缝插针 坦克小游戏 坦克小游戏2 切水果 五子棋 走出迷宫 消灭僵尸 钓鱼
转自：http://hovertree.com/h/bjaf/css3icon.htm
更多：http://www.cnblogs.com/roucheng/p/texiao.html
相关文章
-
09
2022-11
-
19
2022-10
-
30
2022-09
-
15
2022-09
-
15
2022-09
-
15
2022-09
推荐阅读
随机推荐
- 【精编Css教程】11div+css网页标准布局实例教程（一）
- JQuery和CSS3给图片制作圆角
- CSS设置文本SSSOR Yaher midder Regel light
- [解释Bootstrap 4中常用popover-CSS注释的使用
- 了解JSS in JS(JSS)并在React项目中配置和使用JSS
- CSS——(3)样式
- 全面面试每日3 1 3354个工作日867
- 前端面试每日3 1 ——第869天
- HTML、CSS、JS、PHP的学习顺序~(零基础初学者)
- stylelint 接入实战踩坑总结
- 第02天半铸钢ˌ钢性铸铁(Cast Semi-Steel)
- link和@import的差异link和@import的差异引起的CSS渲染闲聊
- css3的新属性新颜色-透明度-两个渐变-定义多个背景图-背景-大小
- Css预编译(Sass&&Less)
- 9.使用CSS样式，自己制作单选框样式和选中功能
- HTML CSS中的文本段落排版
- HTML+CSS 让div在屏幕中居中（水平居中+垂直居中）方法总结
- CSS搞怪|完全兼容磨砂玻璃效果
- CSS 笔记
- css基础结构 CSS基础知识筑基