看到一些牛逼哄哄的前端牛用纯HTML+CSS实现了HTML5的标志、Opera的标志、遨游的标志。于是自己手痒也想来挑战自己,被我瞄准的是百度。
怎么在网页上实现无图片的百度Logo呢?
思路:百度主页的Logo(如下图)。它主要是“Baidu百度”字样和一个爪子的标志。
1、幸运的是,“Baidu百度”字样的字体已经有人设计出来了,而且是免费的,那就是“百度综艺体”(百度之既可以下载到),要在网页上引用第三方字体,可以使用CSS3的@font-face,这样即便是在用户的浏览器上没有这种字体的情况下,一样可以正常显示。
2、爪子部分实现难度最大。爪子中的四个圆圈,可以使用CSS3的border-radius实现圆形,然后用CSS3的transform来把圆形变换为椭圆;而爪子的掌心部分,比较麻烦,同样是使用CSS3的border-radius和transform来实现椭圆,然后层层叠加。
思路介绍完毕,说做就做。马上开始!
一、先搭好框架:
<div id="baiduLogo">
<div id="leftText"><p>Bai</p></div>
<div id="middleText">
<p>du</p>
</div>
<div id="rightText"><p>百度</p></div>
</div>
为方便定位,我这里把Logo分为左边的“Bai”部分、中间的爪子和“du”、右边的“百度”这三部分。CSS代码如下:
#baiduLogo{
position:absolute;
left:50%;
top:50%;
margin-left:-90px;
margin-top:-30px;
width:180px;
height:60px;
background-color:#FFF;
font-family:"百度综艺体", "微软雅黑";
font-weight:bold;
vertical-align:text-bottom;
}
#leftText{
position:absolute;
bottom:0px;
left:0px;
width:62px;
/*height:60px;*/
font-size:33pt;
}
#middleText{
position:absolute;
bottom:0px;
left:62px;
width:52px;
/*height:60px;*/
font-size:23pt;
}
#rightText{
position:absolute;
bottom:0px;
right:0px;
width:68px;
/*height:60px;*/
font-size:25pt;
}
#leftText p{
position:absolute;
bottom:-9px;
color:#e50601;
}
#middleText p{
position:absolute;
display:block;
left:9px;
bottom:-1px;
color:#FFFFFF;
overflow:visible;
z-index:7;
}
#rightText p{
position:absolute;
bottom:-5px;
color:#e50601;
}