css3实例教程之css3写出遨游的logo

实现方法:

最终效果图如下:

CSS3写的遨游logo(转) - 简单的猪 - 简单的猪

<!DOCTYPE html>
<html>
<head>
<title>Maxthon logo in CSS</title>
<style>
body{margin:0;background:#fff;font-family:"Lucida Grande",Verdana,Arial,sans-serif;
font-size:75%;color:#333;text-shadow:0 1px 0 rgba(255,255,255,0.8);}
#content{background:#e5e5e5;padding-top:2em;}
/** Maxthon **
******************/
#maxthon-logo {
width: 250px;
height: 280px;
position: relative;
margin: 0 auto;
}
#maxthon-logo div { position: absolute;}
#maxthon-logo .border{
width: 240px;
height: 240px;
background:#b1e4ff;
border:2px solid #789cb6;
border-radius: 120px;
-moz-border-radius: 120px;
}
#maxthon-logo .border{opacity:0.80;}
#maxthon-logo .border:hover{opacity:1;box-shadow:0 0 15px #fff;
-webkit-box-shadow:0 0 15px #fff;-moz-box-shadow:0 0 15px #fff;}
#maxthon-logo .circle{
width: 230px;
height: 230px;
top:5px;
left:5px;
border-radius: 115px;
-moz-border-radius: 115px;
background:#3b99e3;
}
#maxthon-logo .m{
width: 150px;
height: 100px;
top:70px;
left:42px;
background:#ffffff;
border-radius: 3px 20px 3px 3px;
-moz-border-radius: 3px 20px 3px 3px;
}
#maxthon-logo .fix-m{
width: 35px;
height: 45px;
top:30px;
left:33px;
background:#ffffff;
border:25px solid #3b99e3;
border-bottom:none;
}
</style>
</head>
<body>
<div id="content">
<div id="maxthon-logo">
<div class="border">
<div class="circle">
<div class="m">
<div class="fix-m"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。