css画小米、遨游logo
狠简单的2个Logo,用纯css写出来，觉得挺好玩的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>遨游、小米logo</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.fl{ float: left; margin-left: 20px;}
.aoyou{
width: 240px;
height: 240px;
border-radius: 120px;
background:#b1e4ff;
border:2px solid #789cb6;
box-shadow: 5px 5px 7px #999;
-moz-border-radius: 120px;
}
.aoyou1{
width: 230px;
height: 230px;
border-radius: 115px;
position: relative;
top:5px;
left:5px;
background:#3b99e3;
-moz-border-radius: 115px;
}
.aoyou2{
width: 150px;
height: 100px;
background:#ffffff;
position: relative;
top:70px;
left:42px;
border-radius: 3px 20px 3px 3px;
-moz-border-radius: 3px 20px 3px 3px;
}
.aoyou3{
width: 35px;
height: 45px;
background:#ffffff;
position: relative;
top:30px;
left:33px;
border:25px solid #3b99e3;
}
/**=================下面是小米的logo=====================**/
.xiaomi_bg{
position:relative;
width: 305px;
height: 305px;
background: #FF6F3D;
border-radius: 20px;
}
.xiaomi_nei1{
position:absolute;
left: 60px;
top: 95px;
border-radius:0px 20px 0px 0px;
background: #fff;
height:115px;
width: 130px;
}
.xiaomi_nei2{
position: absolute;
right: 60px;
top: 95px;
width: 30px;
height: 115px;
background: #fff;
}
.xiaomi_nei3{
position: absolute;
background: #fff;
border: 20px #FF6F3D solid;
left: 30px;
top: 25px;
width: 30px;
height: 70px;
border-top-right-radius: 20px;
}
</style>
</head>
<body>
<!--遨游logo-->
<div class="aoyou fl">
<div class="aoyou1">
<div class="aoyou2">
<div class="aoyou3"></div>
</div>
</div>
</div>
<!--end 遨游-->
<!--小米logo-->
<div class="xiaomi_bg fl">
<div class="xiaomi_nei1">
<div class="xiaomi_nei3"></div>
</div>
<div class="xiaomi_nei2"></div>
</div>
<!--end 小米logo-->
</body>
</html>
忘了传效果图(谷歌浏览器下)：
