css3做的ubuntu logo(仅支持chrome)
ubuntu的logo简洁大方，css3操作方便简单，先拿这两个下手：截图如下：
<!DOCTYPE html>
<html>
<head>
<metacharset=utf-8>
<title>ubuntu logo ---- with css3</title>
<style>
* {
margin:0;
padding:0;
}
.wraper_bg {
width:250px;
height:250px;
border-radius:250px;
background:#f60;
position:relative;
}
.wraper {
width:86px;
height:86px;
background:#f60;
border:32px solid white;
border-radius:100px;
position:relative;
top:50px;
left:50px;
}
.ant {
width:11px;
height:40px;
background:#f60;
position:absolute;
}
#top_ant {
top:-27px;
left:8px;
-webkit-transform: rotate(-30deg);
}
#bottom_ant {
top:74px;
left:8px;
-webkit-transform: rotate(30deg);
}
#right_ant {
top:23px;
left:94px;
-webkit-transform: rotate(90deg);
}
.circle {
width:37px;
height:37px;
background:white;
border:7px solid #f60;
border-radius:33px;
position:absolute;
}
#left_circle {
left:-68px;
top:18px;
}
#top_circle {
left:61px;
top:-57px;
}
#bottom_circle {
left:61px;
top:92px;
}
</style>
</head>
<body>
<!--橙色大圆圈背景-->
<divclass="wraper_bg">
<divclass="wraper">
<!--三根隔断圆环的橙色条-->
<divclass="ant"id="top_ant"></div>
<divclass="ant"id="bottom_ant"></div>
<divclass="ant"id="right_ant"></div>
<!--三个白色圆圈-->
<divclass="circle"id="left_circle"></div>
<divclass="circle"id="top_circle"></div>
<divclass="circle"id="bottom_circle"></div>
</div>
</div>
</body>
</html>
页:
[1]