标签：
周末闲着比较无聊，所以用纯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>
标签：
原文地址：http://www.cnblogs.com/DongJianguo/p/4189858.html
