用CSS3实现无图片的百度Logo

看到一些牛逼哄哄的前端牛用纯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;
}

然后开始引入第三方的字体“百度综艺体”。首先定义@font-face。

@font-face {
font-family: '百度综艺体';
/*src: url('baidu.eot?') format('eot');*/ /*IE*/
/*src:url('baidu.woff') format('woff'), url('baidu.ttf') format('truetype');*/ /*non-IE*/
src: url(baidu.ttf) format('truetype');
}

对于IE，只支持eot格式的字体，而其他浏览器一般都用woff或者ttf格式的，网上有这样的字体格式转换工具。哥用的是ttf格式的，然后懒得去转换字体啦，所以这个例子在IE上是显示不出百度综艺体的哦！有恒心的读者自己去转换吧，嘻嘻！

二、开始了艰难的“爪子”部分：

从简单做起，做四个椭圆先！

<div id="baiduLogo">
<div id="leftText"><p>Bai</p></div>
<div id="middleText">
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
<div id="dot4"></div>
<p>du</p>
</div>
<div id="rightText"><p>百度</p></div>
</div>

圆的大小都是18x18px的Div做成的，定义border-radius为9px即可变成一个圆形。然后用 transform: rotatey(45deg) 把它转换为一个椭圆。

在这里可能有点难以理解，其实就是在Y轴上把圆形旋转为一个椭圆。CSS代码如下：

#dot1, #dot2, #dot3, #dot4{
position:absolute;
width:18px;
height:18px;
background-color:#2a32df;
-webkit-border-radius:9px;
-o-border-radius:9px;
-moz-border-radius:9px;
border-radius:9px;
-webkit-transform:rotatey(45deg);
-moz-transform:rotatey(45deg);
-o-transform:rotatey(45deg);
transform:rotatey(45deg);
}

#dot1{
left:-4px;
bottom:29px;
}

#dot2{
left:9px;
bottom:42px;
}

/*注意：第三个圆点是有点倾斜的*/
#dot3{
left:26px;
bottom:41px;
-webkit-transform:rotatey(45deg) skew(-10deg);
-moz-transform:rotatey(45deg) skew(-10deg);
-o-transform:rotatey(45deg) skew(-10deg);
transform:rotatey(45deg) skew(-10deg);
}

/*注意：第四个圆点在高度上有点压缩了*/
#dot4{
left:36px;
bottom:25px;
-webkit-transform:rotatey(45deg) scaleY(0.9);
-moz-transform:rotatey(45deg) scaleY(0.9);
-o-transform:rotatey(45deg) scaleY(0.9);
transform:rotatey(45deg) scaleY(0.9);
}

在这里要注意一下，为模拟真实的百度Logo效果，第三个圆形是有点倾斜的。这里我用了transform的skew，也就是CSS3的倾斜效果。代码例如：transform:rotatey(45deg) skew(-10deg); 其实应该用rotate来实现Z轴上的旋转的，但是这里有点邪门的是：不能同时写rotaey和rotate！

另外需要注意的是，第四个圆形的高度不是18px，它在高度上有点压缩了。这里可以用transform的scaleY来实现高度的压缩。代码例如：transform:rotatey(45deg) scaleY(0.9);

搞定四个圆点之后，就是中间最最最麻烦的掌心部分。我的实现思路是这样的：先用三个大圆形放在掌心的三个尖端处，然后在每两个圆形上填补一个倾斜的矩形，最后用三个白色的椭圆遮罩来使得外边缘出现凹入的弧线。（思路如下图，有点粗糙的说明图~）



代码如下：

<div id="baiduLogo">
<div id="leftText"><p>Bai</p></div>
<div id="middleText">
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
<div id="dot4"></div>
<div id="du1"></div>
<div id="du2"></div>
<div id="du3"></div>
<div id="du4"></div>
<div id="du5"></div>
<div id="du6"></div>
<div id="du7"></div>
<div id="du8"></div>
<div id="du9"></div>
<p>du</p>
</div>
<div id="rightText"><p>百度</p></div>
</div>

CSS代码如下：

/*#du1、#du2和#du3是三个圆形*/
#du1, #du2, #du3{
position:absolute;
background-color:#2a32df;
}

#du1{
left:2px;
bottom:1px;
width:20px;
height:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

#du2{
left:29px;
bottom:1px;
width:20px;
height:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

#du3{
left:17px;
bottom:22px;
width:14px;
height:14px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
border-radius:7px;
-webkit-transform:rotatey(45deg) scaleX(1.6);
-moz-transform:rotatey(45deg) scaleX(1.6);
-o-transform:rotatey(45deg) scaleX(1.6);
transform:rotatey(45deg) scaleX(1.6);
}

/*#du4、#du5和#du6是三个旋转后的矩形*/
#du4, #du5, #du6{
position:absolute;
background-color:#2a32df;
}

#du4{
left:6px;
bottom:8px;
width:25px;
height:20px;
-webkit-transform:rotate(-49deg);
-moz-transform:rotate(-49deg);
-o-transform:rotate(-49deg);
transform:rotate(-49deg);
}

#du5{
left:19px;
bottom:8px;
width:25px;
height:19px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

#du6{
left:10px;
bottom:2px;
width:28px;
height:16px;
}

/*#du7、#du8和#du9是三个白色的遮罩椭圆*/
#du7, #du8, #du9{
position:absolute;
background-color:#fff;
}

#du7{
left:2px;
bottom:17px;
width:16px;
height:16px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
-webkit-transform:rotatey(70deg) skew(-67deg);
-moz-transform:rotatey(70deg) skew(-67deg);
-o-transform:rotatey(70deg) skew(-67deg);
transform:rotatey(70deg) skew(-67deg);
}

#du8{
left:31px;
bottom:19px;
width:14px;
height:14px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
border-radius:7px;
-webkit-transform:rotatey(70deg) skew(70deg);
-moz-transform:rotatey(70deg) skew(70deg);
-o-transform:rotatey(70deg) skew(70deg);
transform:rotatey(70deg) skew(70deg);
}

#du9{
left:16px;
bottom:-9px;
width:20px;
height:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
-webkit-transform:rotatex(80deg);
-moz-transform:rotatex(80deg);
-o-transform:rotatex(80deg);
transform:rotatex(80deg);
}

用到的也主要是CSS3的transform：rotate、skew、scale。（在这里调节像素调了俺好久呀！！~~建议弟兄们现在PS上调好像素）

最后大功告成啦！看看效果：

在我心爱的遨游上显示如下：



在firefox上显示如下：



在chrome上显示如下：



在safari上显示如下：（这里有个bug，中间的“du”只有在safari的页面缩放到一个特定数值才能显示出来，难道是因为字体太小？）



在Opera上显示有点悲剧，貌似这货不支持transform：



在万恶的IE上显示得也是这般囧。我的是IE9，IE10或许会好点：



最后总结一下：总体上基本还原了百度Logo的样子，由此可见CSS3的强大，真没有这货做不出来的图形（如果不限麻烦的话）。

不过需要改进的还是有很多的：

1、“Baidu”字样无法加粗，但是中文部分却可以加粗了，奇怪！

2、掌心部分与真实logo的吻合度其实还不够相似，需要不断微调；

3、浏览器兼容性问题，如transform和字体；

4、最可怕的问题：第三方字体包有800多K的大小，这比原图片也要大了，用上第三方字体会让用户的浏览器要更多的时间去下载第三方字体，这由违背了我的设计初衷；

Web移动端把流量看得最重，试想谁会喜欢浏览器把自己手机的流量都吸光啦。百度搜索作为很多国人默认的互联网入口，它的正确和快速显示显得很重要。在移动端网络不好的情况下，对百度主页最大的挑战就是那个Logo图片。所以哥就实现了这样的一个CSS3的百度Logo。未来，哥还想用HTML5的Canvas实现一次，HTML5的Canvas在兼容性方面更好。

PS：哥需要百度的实习呀！

还不见面试通知。。。。