周末闲着比较无聊，所以用纯css的方法画了4个常见的icon，虽然不太好看，而且代码比较多，但是可以当作是一个兴趣，慢慢玩，div比较多，其实可以用伪类：before和：after替换的，为了实现悬停变色，我外面包了一层a标签。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS icon</title>
6 <style>
7 a.icon{
8 display:block;
9 position:relative;
10 margin:30px;
11 }
12
13 a.person div.head{
14 width:20px;
15 height:20px;
16 background:blue;
17 -moz-border-radius:10px;
18 border-radius:10px;
19 position:relative;
20 top:0;
21 left:5px;
22 }
23 a.person div.body{
24 width:30px;
25 height:20px;
26 background:blue;
27 -moz-border-radius:10px 10px 0 0;
28 border-radius:10px 10px 0 0;
29 position:absolute;
30 top:20px;
31 left:0;
32 }
33 a.person:hover div{
34 background:#3498DB;
35 }
36
37
38 a.home div.top{
39 width:0;
40 height:0;
41 border-left:15px solid transparent;
42 border-right:15px solid transparent;
43 border-bottom:12px solid blue;
44 }
45 a.home div.bottom{
46 width:25px;
47 height:15px;
48 background:blue;
49 position:absolute;
50 top:13px;
51 left:2.5px;
52 }
53 a.home:hover div.bottom{
54 background:#3498DB;
55 }
56 a.home:hover div.top{
57 border-bottom-color:#3498DB;
58 }
59
60 a.mail div.mailbottom{
61 width:34px;
62 height:20px;
63 background:blue;
64 }
65 a.mail div.mailtop{
66 width:0;
67 height:0;
68 border-left:17px solid transparent;
69 border-right:17px solid transparent;
70 border-top:15px solid #0000CC;
71 position:absolute;
72 top:0px;
73 }
74 a.mail:hover div.mailbottom{
75 background:#3498DB;
76 }
77 a.mail:hover div.mailtop{
78 border-top-color:#238BC7;
79 }
80
81
82 a.tel div.left,a.tel div.right{
83 width:15px;
84 height:15px;
85 background:blue;
86 -moz-border-radius:10px;
87 border-radius:10px;
88 position:absolute;
89 }
90 a.tel div.middle{
91 width:30px;
92 height:10px;
93 background:blue;
94 -webkit-transform:rotate(45deg);
95 -moz-transform:rotate(45deg);
96 -ms-transform:rotate(45deg);
97 -o-transform:rotate(45deg);
98 transform:rotate(45deg);
99 }
100 a.tel div.left{
101 top:-16px;
102 left:-2px;
103 }
104 a.tel div.right{
105 left:19px;
106 bottom:-10px;
107 }
108 a.tel:hover div{
109 background:#3498DB;
110 }
111 </style>
112 </head>
113 <body>
114 <a href="#" class="icon person">
115 <div class="head"></div>
116 <div class="body"></div>
117 </a>
118 <a href="#" class="icon home">
119 <div class="top"></div>
120 <div class="bottom"></div>
121 </a>
122 <a href="#" class="icon mail">
123 <div class="mailbottom"></div>
124 <div class="mailtop"></div>
125 </a>
126 <a href="#" class="icon tel">
127 <div class="left"></div>
128 <div class="middle"></div>
129 <div class="right"></div>
130 </a>
131 </body>
132 </html>
时间： 2024-10-29 19:05:59