css3做的ubuntu logo(仅支持chrome)

lygyh9985825 · 发表于 2018-5-6 07:24:23

　　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>

账号		自动登录	找回密码
密码			立即注册

大疆运维招人啦，

C++ :try 语句块和异常处理

C++的多态

Red Hat RHCE 8 (EX294) Cert Guide

Java/C++ 区别：看完这一篇，就够用！

别再用过时库了！这 13 个顶级 C++ 库才是

c++ size_t 和 int 的区别

[经验分享] css3做的ubuntu logo(仅支持chrome)

浏览过的版块

扫码加入运维网微信交流群