CSS3实现Chrome浏览器的新LOGO

Google的Chrome浏览器更换新的LOGO，新LOGO简洁大方，又能表达Chrome快速的含义，我们这里就用CSS3写一个Chrome LOGO，效果如下：

以上效果只能在Chrome浏览器里显示仅支持webkit内核浏览器，别的什么都是浮云，想支持的自己多写一点CSS3吧。代码放出来····

.chrome {
position:relative;
width:300px;
height:300px;
margin:40px 0 40px 40px;
overflow:hidden;
-webkit-border-radius:300px;
-webkit-transition:all 3s ease-in-out;
}
.chrome:hover {
-webkit-transform:translate(400px, 0) rotate(360deg)
}
.chrome div {
position:absolute;
text-indent:-9999px;
}
.heart_white {
z-index:100;
top:95px;
left:95px;
width:110px;
height:110px;
background:#fff;
-webkit-border-radius:110px;
overflow:hidden;
}
.heart {
top:10px;
left:10px;
width:90px;
height:90px;
background:#f00;
-webkit-border-radius:90px;
background:-webkit-gradient(linear, left top, left bottom, from(#80B1DA), to(#165E98));
}
.chrome_wrap {
z-index:100;
top:-100px;
left:-100px;
width:300px;
height:300px;
-webkit-border-radius:300px;
border:100px solid #fff;
}
.part_color {
width:200px;
height:210px;
opacity:0.94;
}
.part_red {
z-index:3;
top:-44px;
left:55px;
-webkit-transform:rotate(60deg);
-webkit-border-bottom-right-radius:30px;
background:-webkit-gradient(radial, 20% 30%, 20, 40% 30%, 100, from(#ED5F51), to(#DF2228));
}
.part_red2 {
z-index:9;
width:160px;
height:80px;
top:50px;
left:18px;
-webkit-transform:rotate(60deg);
background:-webkit-gradient(radial, 30% 0, 30, 40% 30%, 60, from(#E54745), to(#E12F35));
}
.part_yellow {
z-index:5;
top:95px;
right:-30px;
-webkit-border-top-left-radius:30px;
background:-webkit-gradient(radial, 30% 40%, 130, 40% 20%, 60, from(#DBA328), to(#FDD207));
}
.part_green {
z-index:7;
top:82px;
left:-25px;
-webkit-transform:rotate(117deg);
-webkit-border-top-left-radius:30px;
background:-webkit-gradient(radial, 30% 40%, 120, 30% 40%, 60, from(#419643), to(#4DB749));
}
.mask_color {
width:110px;
height:110px;
background:#fff;
}
.mask_red {
z-index:8;
height:40px;
top:60px;
left:25px;
-webkit-transform:rotate(50deg);
background:#E12F35;
}
.mask_yellow {
z-index:4;
top:105px;
right:-10px;
-webkit-transform:rotate(-12deg);
}
.mask_green {
z-index:6;
top:185px;
left:38px;
-webkit-transform:rotate(15deg);
}

写这篇文章意在提醒大家用最新的技术最新的方法去实践最人性化的前端