现在所展示的所有图标都是用DIV+CSS写的代码，没有一张图片，同时也做了一些浏览器的兼容，除了支持CSS3的浏览器能比较完美的显示外（如Firefox,Opera,Safari,Chrome浏览器），也运用css hack做了对ie6以上的浏览器显示效果的调整，不至于在ie下显示传特别乱。
以上的六个图标主要应用的CSS3新发布的样式进行布局的（如：投影、渐变、旋转、倾斜、过渡效果），最大限度的兼容谷歌火狐等浏览器的同时也运用css hack针对ie浏览进行了一些兼容和调整，让图标的显示效果不至于太过凌乱，字体引用的谷歌字体Kelly Slab，另外还加了几个CSS3自定义的动画效果。
针对ie浏览器，还用ie-css3.htc文件做了圆角兼容处理，也用filter滤镜做了旋转、投影等效果的处理。 但是在处理过程中发现，圆角效果不能实现局部圆角，filter滤镜也存在很多的不足，如：
背景透明要通过一定的处理才能实现多浏览器的兼容
background:rgba(0,0,0,0); opacity:0.0\0; /* ie8+ie9 / filter:alpha(opacity=0)\0; / ie8+ie9 */
边框div代码:
<div class="photo_wap">
<div class="photo"></div>
<div class="photo_shadow"></div>
<div class="photoS">
</div>
</div>
边框CSS代码:
/*****边框样式*****/
.photo_wap {
position:relative;
float:left;
height:140px;
width:130px;
margin:50px 50px;
}
.photo, .photo_shadow, .photoS {
position:absolute;
z-index:2;
width:110px;
height:110px;
background:#0365c0;
border:10px solid #2797ff;
border-radius:20px;
behavior: url(css/ie-css3.htc); /* ie */
}
.photo_shadow {
top:10px;
z-index:1;
border-color:#0365c0;
}
.photoS {
right:10px;
top:22px;
height:98px;
background:#f2f9ff;
border:0;
border-radius:10px;
}
div的代码：
<div class="photo_wap">
<div class="photo"></div>
<div class="photo_shadow"></div>
<div class="photoS">
<div class="photoBB">
<div class="photoBa"></div>
<div class="photoBb">
<div class="photoBba"></div>
<div class="photoBbb"></div>
</div>
<div class="photoBc">
<div class="photoBba"></div>
<div class="photoBbb"></div>
</div>
<div class="photoBd"></div>
<div class="photoBe"></div>
<div class="photoBf"></div>
</div>
<div class="photoBg"></div>
<div class="photoBh"></div>
</div>
<div class="photo_text"><a>Sun</a></div>
</div>
这是css的代码:
/*****图标样式Sun-B*****/
.photoBB,
.photoBa,
.photoBb,
.photoBc,
.photoBba,
.photoBbb,
.photoBd,
.photoBe,
.photoBf {
border-radius:72px;
}
.photoBB {
position:relative;
width:72px;
height:72px;
margin: 0 auto;
margin-top:13px;
background: #ffd42d;
}
.photoBa {
width:48px;
height:48px;
margin:0 auto;
padding-top:8px;
border-bottom:4px solid #000;
background: #ffd42d;
}
.photoBb,
.photoBc {
position:absolute;
top:18px;
left:12px;
height:16px;
width:16px;
background:#000;
}
.photoBc {
left:44px;
}
.photoBba,
.photoBbb {
position:absolute;
top:3px;
left:3px;
height:6px;
width:6px;
background:#b8b8b8;
}
.photoBbb {
top:9px;
left:9px;
height:4px;
width:4px;
}
.photoBd,
.photoBe {
position:absolute;
top:35px;
left:1px;
z-index:8;
height:20px;
width:20px;
background: #F90;
background: -webkit-gradient(linear, left top, right bottom, from(#ffd42d), to(#fc7821)); /* Safari 和 Chrome */
background: -moz-linear-gradient(top left, #ffd42d, #fc7821); /* Firefox */
}
.photoBe {
left:49px;
}
.photoBf {
position:absolute;
top:6px;
left:19px;
width:16px;
height:6px;
background:#feecaf;
border-radius:6px;
-webkit-transform: rotate(-20deg) skew(0deg); /* Safari 和 Chrome */
transform: rotate(-20deg) skew(0deg); /* Opera Firefox */
}
.photoBg,
.photoBh {
position:absolute;
top:12px;
left:18px;
z-index:-5;
height:73px;
width:73px;
background:#ffb400;
opacity:0.9;
transition: all 2s; /* 过渡效果 */
-moz-transition: all 2s; /* Firefox */
-webkit-transition: all 2s; /* Safari 和 Chrome */
-o-transition: all 2s; /* Opera */
}
.photoBh {
background:#ffcc00;
opacity:0.7;
/* IE 5.5 - 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=120, Color='#bbbbbb');
}
/* IE 9 */
:root .photoBh {
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#bbbbbb');
}
.photoS:hover .photoBg,
.photoS:hover .photoBh {
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
/*******动画样式*******/
/*****Sun-B*****/
.photoBg {
animation: suna 5s linear 0s infinite normal;
/* Firefox: */
-moz-animation: suna 5s linear 0s infinite normal;
/* Safari 和 Chrome: */
-webkit-animation: suna 5s linear 0s infinite normal;
}
.photoBh {
animation: sunb 5s linear 0s infinite normal;
/* Firefox: */
-moz-animation: sunb 5s linear 0s infinite normal;
/* Safari 和 Chrome: */
-webkit-animation: sunb 5s linear 0s infinite normal;
}
@keyframes suna
{
from { transform: rotate(22deg); }
to { transform: rotate(382deg); }
}
@-moz-keyframes suna /* Firefox */
{
from { transform: rotate(22deg); }
to { transform: rotate(382deg); }
}
@-webkit-keyframes suna /* Safari 和 Chrome */
{
from { -webkit-transform: rotate(22deg); }
to { -webkit-transform: rotate(382deg); }
}
@keyframes sunb
{
from { transform: rotate(-22deg); }
to { transform: rotate(338deg); }
}
@-moz-keyframes sunb /* Firefox */
{
from { transform: rotate(-22deg); }
to { transform: rotate(338deg); }
}
@-webkit-keyframes sunb /* Safari 和 Chrome */
{
from { -webkit-transform: rotate(-22deg); }
to { -webkit-transform: rotate(338deg); }
}
其他的几个图标的代码在这里就不一一给出了，只拿这个做个例子。为完成这几个图标，本人在网上查了很多大神们的笔记和经验，所以，感谢各位大神分享，感谢搜索引擎。